CSS 布局系列（一）—(1)，高级前端晋升之View渲染机制

• justify-content —— 管理主轴的富裕空间

• align-items —— 管理侧轴的富裕空间

• align-contents —— 管理侧轴的富裕空间（适用于多行的子项目）

在上面提到主轴和侧轴两个术语，这里解释一下：主轴就是子项目主要的排列方向，侧轴就是于主轴垂直的方向。默认情况下，一旦开启了 flex-container ，主轴就是 从左到右的水平方向，侧轴就是从上往下的垂直方向。

flex-direction

flex-direction 这个属性用于定义主轴的方向，可选值：

• row —— 默认值，水平方向（从左往右）

• row-reverse —— 与默认的水平方向相反（从右往左）

• column —— 垂直方向（从上往下）

• column-reverse —— 垂直方向相反（从下往上）

在本文最初的示例中提到，当开启了 display:flex;，里面的子元素就会变成水平一行的排列，无论这些元素是否是块级元素。而其中的原因就是因为这个属性 flex-direction 有默认值：row。 它代表容器里面的元素沿着水平方向从左到右排列。

如果将属性设置为 column ，那么元素就会沿着垂直方向，从上往下排列：

其余没有演示的两个可选值就不演示了，只是方向的不同而已。

flex-wrap

flex-wrap 这个属性用于处理溢出的子项目，可选值：

• nowrap —— 默认值，如果宽度不足，则压缩子项目，项目不换行。

• wrap —— 溢出的项目换行。

• wrap-reverse —— 溢出的项目换行，并且顺序反转。

先来看默认的情况，因为公共代码没有溢出父容器，为了看到溢出的效果，所以先加上两个子项目：

1