一、flex布局原理
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
二、flex布局父项常见属性
1.1 flex-direction 属性决定主轴的方向
注意：主轴和侧轴是会变化的，看flex-direction设置谁为主轴，剩下的就是侧轴。而子元素是跟着主轴来排列的
| 属性值 | 说明 |
| row | 从左到右（默认值） |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
注意：使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
| flex-start | 从头部开始 如果主轴是X轴，则从左到右（默认值） |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是X轴则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间（重要） |
| 默认值 | 说明 |
| nowrap | 不换行（默认值） |
| wrap | 换行 |
| 属性值 | 说明 |
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸（默认值） |
| 属性值 | 说明 |
| flex-start | 在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
| flex-flow: column wrap; |
| flex:1; |