浮动布局：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；