布局基本结构
父项属性
flex-direction: 设置主轴方向 row / row-reverse / column / column-reverse
flex-wrap: 设置子元素是否换行 nowrap / wrap / wrap-reverse
flex-flow: 复合了flex-direction和flex-wrap
justify-content: 设置主轴上子元素排列方式（存在剩余空间时） flex-start / flex-end / center / space-around / space-between
align-items: 设置侧轴子元素排列方式（单行）（父元素要设置高度） flex-start / flex-end / center
align-content: 设置侧轴子元素排列方式（多行当做整体） flex-start / flex-end / center / space-around / space-between
子项属性
flex: 子项所占分数 数字/百分比
align-self: 子项自己在侧轴的排列方式
order: 排列的前后顺序，数字越小，越靠前，默认0
伸缩比例
flex-basis: 伸缩基准值 设置后，宽度width不再生效
flex-grow: 扩展比率 对于所在行剩余的宽度，以相应比例分配给子项
flex-shrink: 缩小比率 总宽度放不下，超出的宽度以比例缩减
flex: grew、shrink、basis的综合写法（注意顺序）
特殊写法
| 属性 | 作用 |
|---|---|
| flex:auto; | flex: 1 1 auto; |
| flex:none; | flex: 0 0 auto; width生效 |
| flex:0%; | flex: 1 1 0%; |
| flex:100%; | flex: 1 1 100%; |
| flex:1; | flex: 1 1 0%; |