Flex布局中父项常见属性

使用flex布局时先对父盒子设置display:flex

1.flex-direction：设置主轴的方向（重要，影响其他参数的布局效果）

属性值	含义
row	按行从左到右排列
row-reverse	按照行从右到左排列
column	按照列从上到下排列
column-reverse	按照列从下到上排列

2.flex-wrap：设置子元素是否换行

属性值	含义
nowrap	默认值，不换行
wrap	换行

3.flex-flow :flex direction 和 flex wrap 属性的复合属性

/*例如*/
flex-flow:row wrap;
           

4.justify-content：设置主轴上的子元素排列方式

属性值	含义
flex-start	默认值从头部开始 如果主轴是 x 轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x 轴则 水平居中）
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间（重要）

5.align-items：设置侧轴上的子元素排列方式（单行）

属性值	含义
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中，使用较多）
stretch	侧轴拉伸至父盒子大小（使用较少）

6.align-content：设置侧轴上的子元素的排列方式（多行）

属性值	含义
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度