flex布局
常用父元素属性
display：设置元素种类及布局方式
| 属性值 | 说明 |
|---|---|
| block | 设置为块级元素，独占一行 |
| inline | 设置为内联元素(默认值) |
| inline-block | 设置为行内块元素 |
| none | 隐藏元素 |
| flex | 设置为弹性布局 |
| grid | 设置为网格布局 |
flex-direction：设置主轴方向
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content：设置主轴上的子元素排列方式
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐,如果主轴是x轴，则水平居中 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间 |
flex-wrap：设置子元素是否换行
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值不换行 |
| wrap | 换行 |
align-content：设置侧轴上的子元素的排列方式(多行)
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子元素在侧轴评分剩余空间 |
| space-between | 子元素在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子元素高度平分父元素高度 |
align-items：设置侧轴上的子元素排列方式(单行)
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 从上到下 |
| flex-end | 从下到上 |
| center | 居中 |
| stretch | 拉伸 |
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
常用子元素属性
flex：控制自己所占的份数
| 属性值 | 说明 |
|---|---|
| 数字 | 所占份数 |
align-self：控制自己在侧轴上的排列方式
order：定义子项的排列顺序