flex
基本视图
设置在容器（父级）上的属性：
flex-direction
设置主轴方向：column-reverse、column、row（默认值）、row-reverse
flex-wrap
设置换行方式：nowrap（默认值）、wrap、wrap-reverse
flex-flow
flex-direction和flex-wrap的简写，默认值为row nowrap
justify-content
主轴的对齐方式：flex-start（默认值）、flex-end、center、space-between、space-around
align-items
交叉轴对齐方式：flex-start、flex-end、center、baseline、stretch（默认值）
备注：
baseline：以第一行文字的基线对齐
stretch：如果子元素未设置高度或设置为auto，将占满整个容器高度
align-content
多根轴线的对齐方式：flex-start、flex-end、center、space-between、space-around、stretch（默认值）
备注：
如果只有一根轴线，该配置无效
设置在项目（子元素）中的属性：
order
排列顺序，数值越小越靠前，默认为0
flex-grow
放大比例，分配剩余空间，默认为0，不放大
flex-shrink
缩小比例，空间不足压缩元素，默认为1，空间不足自动压缩
flex-basis
定义在分配多余空间之前，项目占据的主轴空间，默认为auto，即原本大小，可以设置为具体的像素值，表占据固定空间
flex
flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto，后两位选填
快捷值：auto（1 1 auto）和none（0 0 auto）
align-self
单个项目对齐方式，覆盖align-items属性，默认值为auto，表继承父级元素的align-items
取值：auto、flex-start、flex-end、center、baseline、stretch
flex-grow的计算规则
- 首先计算flex-grow的份数
- 子元素宽度 = 原有宽度 + 剩余空间 * 该元素所占比例
