一、Flex布局是什么Flex全称Flexible Box (弹性盒子)是CSS3新增的一维布局模型专门用来解决页面元素排列、对齐、自适应问题。只要给父元素添加display: flex;子元素就会自动变成弹性项目拥有弹性布局特色为父盒子设flex布局后子元素float,clear,vertical-align失效。二、Flex核心两大角色弹性容器父元素设置了 display: flex; 的盒子控制整体排列规则弹性项目子元素容器内部的直接子元素自动适配弹性规则三、属性3.1父容器Flex容器核心属性3.1.1 display:flex--开启弹性布局给父元素设置该属性直接开启弹性模式子元素自动变为弹性项目。.box {display: flex;}3.1.2 flex-direction--设置排列方向控制子元素是水平排列还是垂直排列修改主轴方向。属性值效果row(默认)水平从左到右排列row-reverse水平从右到左排列column垂直从上到下排列column-reverse垂直从下到上排列3.1.3 flex-wrap--设置是否换行默认子元素不换行空间不足会压缩尺寸通过该属性可开启自动换行。属性值效果nowrap(默认)不换行子元素自动挤压wrap自动换行空间不足自动跳下一行wrap-reverse反向换行3.1.4 justify-content--水平对齐主轴对齐控制子元素在水平方向的排列对齐方式最常用属性之一属性值效果flex-start默认左对齐flex-end右对齐center水平居中space-between两端对齐中间自动均分间距space-around元素两侧均分间距左右都有空隙space-evenly所有间距完全均等3.1.5 align-items--单行垂直对齐侧轴对齐控制单行子元素在垂直方向的对齐方式轻松实现垂直居中属性值效果stretch默认子元素高度拉伸铺满父容器flex-start顶部对齐flex-end底部对齐center垂直居中3.1.6 align-content--多行垂直对齐只针对多行换行的弹性元素生效控制整体多行内容的垂直对齐方式。属性值效果stretch默认子元素高度平分父元素高度flex-start从顶部开始排flex-end从底部开始排center在侧轴中间显示space-between子项两头剩下平分space-around子元素在侧轴平分剩余空间3.1.7 flex-flow是flex-direction和flex-wrap的复合属性。3.2子项目Flex项目核心属性3.2.1 flex--自适应缩放flex: n代表子元素的占比权重权重越大分配的剩余空间越多。.item {flex: 1; /*所有子元素宽度平分*/}3.2.2 align-self--单独设置子元素垂直对齐可以让单个子元素不跟随父容器的对齐规则单独设置垂直对齐方式。.item:nth-child(2) {align-self: center;}3.2.3 order--调整元素排列顺序默认order值为0数值越小排列越靠前无需修改HTML结构即可调整顺序。