flex相关的属性
应用在 flex container 上的 CSS 属性：
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
应用在 flex items 上的 CSS 属性：
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
- flex
flex-direction
flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布。flex-direction 决定了 main axis 的方向，有 4 个取值：row（默认值）、row-reverse、column、column-reverse
flex-wrap
flex-wrap 决定了 flex container 是单行还是多行。
- nowrap（默认）：单行
- wrap：多行
- wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。顺序任何, 并且都可以省略。
justify-content
justify-content 决定了 flex items 在 main axis 上的对齐方式。
- flex-start（默认值）：与 main start 对齐
- flex-end：与 main end 对齐
- center：居中对齐
- space-between：flex items 之间的距离相等。与 main start、main end两端对齐。
- space-around：flex items 之间的距离相等。flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
- space-evenly：flex items 之间的距离相等。flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离。
align-item
align-items 决定了 flex items 在 cross axis 上的对齐方式。
- normal：在弹性布局中，效果和stretch一样
- stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
- flex-start：与 cross start 对齐
- flex-end：与 cross end 对齐
- center：居中对齐
- baseline：与基准线对齐
