设置Flex布局

1、设置Flex布局（display：flex）

语法：display：flex； //设置拥有盒子的display属性值为flex即可开启弹性盒模式

2、设置子元素的占比（flex：数字）

语法：flex：数字； //例：flex:2;

3、设置Flex盒子中元素的布局比例

语法：flex-direction：row | row-reverse | column | column-reverse

• row：主轴为水平方向，起点在左端（默认值）
• row：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上端
• column-reverse：主轴为垂直方向，起点在下端

4、伸缩换行（flex-wrap）

语法：flex-wrap：nowrap | wrap | wrap-reverse

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

5、主轴对齐（justify-content）

语法：justify-content：flex-start | flex-end | center | space-between | space-around

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

6、侧轴对齐（align-items）

语法：align-items：flex-start | flex-end | center | baseline | stretch

• flex-start：伸缩项目在侧轴起点边的外边距紧靠该行侧轴起点边
• flex-end：伸缩项目在侧轴终点边的外边距紧靠该行侧轴终点边
• center：伸缩项目的外边距和再该行的侧轴上居中放置
• baseline：伸缩项目根据伸缩项目的第一行文字的基线对齐
• stretch：默认值。伸缩项目拉伸填满整个伸缩项目