使用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 |
设置子项元素高度平分父元素高度 |
