Flex布局

1. justify-content：

   flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)

   flex-end 靠着main-end对齐//参考常见术语(一般是右方向)
   center 靠着主轴居中对齐//一般就是居中对齐
   space-between 两端对齐，靠着容器壁，剩余空间平分
   space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
   space-evenly 平均对齐，不靠着容器壁，剩余空间平分

2. align-items

   flex-start：侧轴的起点对齐。
   flex-end：侧轴的终点对齐。
   center：侧轴的中点对齐。
   stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

3. align-content

   space-between; space-around; center;

4. flex-direction

   主轴的方向，默认值水平向右（row），我们常用的就是改为垂直向下（column ）

5. flex-wrap

   nowrap (默认值) 不换行压缩宽度
   wrap 换行
   wrap-reverses 反向换行