flex布局总结：
1.改变主轴方向(flex-direction):
- row：x轴对齐，默认是row
- row-reverse：x轴翻转对齐
- column：y轴对齐
- column-reverse：y轴翻转对齐
2.主轴对齐方式(justify-content)
- center：主轴对齐
- flex-start：主轴从左到右对齐
- flex-end：主轴从右到左对齐
- space-between：两边贴近，其他子元素分配空间
- space-around：每个子元素平均分配空间(两头小，中间大)
- space-evenly：每个子元素间隔一样
3.侧轴对齐方式(align-items 单行)
- flex-start：侧轴从左到右对齐
- flex-end：侧轴从右到左对齐
- stretch：拉伸对齐（不能设置高度或者宽度）
- center：侧轴居中对齐
4.侧轴对齐方式(align-content 多行)
- 跟justify-content拥有一样的属性
- 只有多行的时候使用此属性才会生效
- 多行的标准是看有没有换行
5.换行(flex-warp)
- flex默认是不会进行换行的，只会压缩子盒子的宽高
- warp：设置换行
- warp-reverse：翻转子元素换行
- 换行之后默认两排或者两列是有很大间距的，可以使用align-content解决
6.flex属性
- flex属性接受number数值用来分配父元素的空间
7.align-self
- 设置子元素关于侧轴的私有的布局方式
8.order
- 设置子元素布局的权重，默认值是0
- 与z-index不同，order设置的是布局的位置方向
9.flex-flow
- 复合属性，相当于设置了flex-direction和flex-wrap
