浮动布局：Flexbox

属性
▋ 水平方向
justify-content：

flex-start：左对齐；
flex-end ：右对齐；
center ：居中对齐；

space-between：水平方向平均分布（如下图）；

space-around：中心点向两边方向均匀分布（如下图）；

▋ 垂直方向
align-items：
flex-start：顶部对齐；


flex-end： 底部对齐；

▋ 浮动方向
flex-direction：
row-reverse：水平方向 靠右侧从右到左排列；

column：垂直方向 从顶部到底部；

column-reverse：垂直方向 相反顺序；

▋ 浮动顺序
order：#（整数，可正可负，控制元素的排列顺序）

▋ 控制单个元素的垂直方向的对齐方式，类似于align-items
align-self：
flex-start；
flex-end；
center；