justify-content：水平方向属性（水平空间位置）

justify-content:center;
以元素中轴线为基准，水平居中排列。

justify-content:flex-end;
默认是flex-start . flex-end,水平靠右排列。

justify-content:space-between;
在每行上均匀分布弹性元素。相邻元素间距离相同。每行第一个元素与首行对齐，每行最后一个元素与行尾对齐。

justify-content:space-around;
按元素数量等分盒子后，每个元素在各自空间居中。（水平居中，每个元素两边的空间都相同。） 在第行上均匀分布弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

justify-content:space-evenly;
元素水平居中后，将剩余空间平均分。
flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。

align-items：垂直方向属性(垂直空间位置）

align-items:center;
纵向水平居中

align-items:flex-end;
纵向靠下

align-items:baseline;
???

align-items:stretch;
垂直方向把盒子拉伸

flex-direction：排列的顺序

flex-direction:row(default);
默认水平从左向右排列

flex-direction:row-reverse;
从右往左排列

flex-direction:column;
从上往下排列

flex-direction:column-reverse;
从下往上排列

order:单个元素调整排列顺序

oder:1;
可实现调整每个元素的位序。

>

align-self:可以用于调整单个元素的位置

align-self:center；单个元素居中

align-self:flex-end；单个元素位置底部

flex-wrap：是否允许换行

flex-wrap:nowrap;
默认不允许换行

flex-wrap:wrap;
允许换行

flex-wrap:wrap-reverse;
允许换行，和wrap反向（类似倒影）

align-content:
属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

align-content:center,
居中

align-content:flex-start,
从左上角开始

align-content:flex-end,
从左下角正序开始

align-content:space-between,
排在上面和下面