弹性盒子

1、伸缩性（flex）

display : flex;
flex : 1;    //在子元素中添加这个表示块的比例

2、伸缩流方向（flex-direction）

flex-direction : row    //主轴为水平方向，起点在右端，是默认的排列方式
flex-direction : row-reverse    //主轴为水平方向，起点在右端
flex-direction : column    //主轴为垂直方向，起点在上端
flex-direction : column-reverse    //主轴为垂直方向，起点在下端

3、伸缩换行（flex-wrap）

flex-wrap : nowrap    //默认值，伸缩容器单行显示，伸缩项目不会换行
flex-wrap : wrap    //伸缩容器多行显示，伸缩项目换行
flex-wrap : wrap-reverse    //伸缩容器多行显示，伸缩项目会换行，并且颠倒行顺序

4、主轴对齐（justify-content）

justify-content : flex-start    //伸缩项目向一行的起始位置靠齐
justify-content : flex-end    //伸缩项目向一行的结束位置靠齐
justify-content : center    //伸缩项目向一行的中间位置靠齐
justify-content : space-between    //伸缩项目会平均分布在行里。第一个伸缩项目在一行中的最开始位置，最后一个伸缩项目在一行中的最终点位置
justify-content : space-around    //伸缩项目会平均分布在行里，两端保留一半的空间

5、侧轴对齐（align-items）

align-items : flex-start    //伸缩项目在侧轴起点边的外边距紧靠该行侧轴起点边
align-items : flex-end    //伸缩项目在侧轴终点边的外边距紧靠该行侧轴终点边
align-items : center    //伸缩项目的外边距盒在该行的侧轴上居中放置
align-items : baseline    //伸缩项目根据伸缩项目的第一行文字的基线对齐
align-items : stretch    //默认值，伸缩项目拉伸填满整个伸缩容器