flex容器的属性
主轴方向
flex-direction：
-
水平方向
-
- row —— 从左向右（默认）
-
- row-reverse ——从右向左
-
垂直方向
-
- column —— 从上往下
-
- column-reverse —— 从下往上
flex元素在主轴上的对齐方式
justify-content：
- flex-start（默认值） —— 分布在左边
- flex-end —— 分布在右边
- center —— 居中分布
- space-between —— 两端对齐 子元素间的间隔相等
- space-around —— 元素与边框间隔相等 子元素之间的间距为与边框的两倍
- space-evenly —— 子元素与边框的间隔和子元素之间的间隔相等
交叉轴方向
flex元素在交叉轴的分布方式
align-items：
- stretch（默认值）—— 如果弹性元素未设置高度或设为auto，将flex元素拉长
- flex-start —— 上对对齐
- flex-end —— 底对齐
- center —— 居中对齐 flex-wrap（换行）：
- nowrp 默认值 不换行
- wrap 换行，第一行在上方
- wrap-reverse 换行，第一行在下方
