Flex布局详解 1. 父项属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素排列方式（多行） align-items：设置侧宙上的子元素排列方式（单行） flex-flow： 复核属性，相当于同时设置了flex-direction和flex-wrap 1.1 flex-direction 设置主轴的方向 flex-direction属性决定主轴的方向（即项目的排列方向） 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的 子元素都是跟着主轴来排列的 属性值 说明 row 默认从左到右 row-reverse 从右到左 column 从上到下 column 从下到上 1.2 justify-content设置主轴上的子元素排列方式 justify-content属性定义了项目在主轴上的对齐方式 注意：使用这个属性之前一定要确定好主轴是那个 属性值 说明 flex-start 默认值从头部开始，如果主轴是x轴，则从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐（如果主轴是x轴则水平居中） space-around 平分剩余空间 space-between 先两边贴边 再平分剩余空间（重要） 1.2.1 flex-start(默认) 1.2.2 flex-end 1.2.3 center 1.2.4 space-around 1.2.5 space-between 1.3 flex-wrap设置元素是否换行 flex默认让子元素在一行显示，项目都排在一条线上（又称“轴线”）,如果装不开会缩小子元素的宽度。 属性值 说明 nowrap 默认值，不换行 wrap 换行 设置flex-wrap:wrap之后 1.4 align-items设置侧轴上的子元素排列方式（单行） 该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用 属性值 说明 flex-start 默认值 从上到下 flex-end 从下到上 center 挤在一起居中（垂直居中） streth 拉伸 1.4.1 flex-start(默认) 1.4.2 flex-end 从下到上 1.4.3 center 垂直居中 1.4.4 streth 去掉height