Flexbox弹性盒子布局

一.弹性盒子是什么？

1.弹性盒子是CSS的一种新布局模式
2.代替浮动使布局更加简便
3.对齐方式包含了水平和垂直方向
4.弹性项目可以通过CSS重新排序

二.基本概念

1.创建容器–在元素身上创建一个display的声明，里面的所有子元素我们称为flex项目。如下图所示。

三.弹性布局的基本属性

1.排列
在容器设置flex-direction，其默认值为row,为横向排列；可选值为column，为纵向排列。
还有一种属于综合性设置，flex-flow。
2.设置元素占比
flex：数字 数字越大，占比越多
3.设置宽度时也可以使用**flex-basis,**效果与width属性一样

四.弹性布局的对齐与排序

1.项目在主轴的对齐方式
justify-content属性
默认值为flex-start,可选值为flex-end（右对齐），space-between（项目之间的距离相等），space-evenly(元素之间的平均分布)
2.项目在交叉轴的对齐方式（需要设置高度）
设置align-items
可选值为flex-start,flex-end,center,baceline
注：其中baceline可选值使按第一行文字的基线作为标准
3.交叉轴的对齐
设置align-content
可选值为flex-start,flex-end,center,space-between ,space-around,stretch为默认值
在使用这条属性时，会自动与交叉轴的起点对齐
4.如果想对单个属性进行设置只需要在元素设置align-self
其所选值与上面相同
5.更改排序
更改元素的排序时可以直接对结构进行排序，但是在弹性布局中我们通常会对元素设置order属性来进行排序，其默认值为0，数字越小越靠前。