flex布局

概念：
Flex是Flexible Box的缩写，即"弹性布局"
水平的主轴 main axis
垂直的交叉轴 cross axis

父容器属性
1 display: flex /* 或者inline-flex 开启flex布局 */
2 flex-direction 主轴方向 row row-reverse colume column-reverse
3 flex-wrap 是否换行 wrap nowrap wrap-reverse
4 flex-flow = flex-direction + flex-wrap

5 justify-content： 主轴对齐方式和额外空间分配
flex-start center flex-end space-between space-around space-evenly

6 align-items: 交叉轴对齐方式
flex-start flex-end center stretch(默认 拉伸) baseline（第一行文字基线对其）

7 align-content 与justify-content类似

子项目属性，设置在子元素上
1 order 设置排列顺序，越小越前，可以是负数，默认0
2 flex-grow 放大比例 正整数
3 flex-shrink 缩小比例
4 flex-basis 定义分配额外空间前尺寸 长度 20% 或者auto
5 flex = flex-grow + flow-shrink + flex-basis 默认0 1 auto

6 align-self 自身对齐方式 属性与align-items一致