第 2 课：两条轴，两个属性

本课目标：

• 说出 flex 容器的主轴和交叉轴。
• 把 justify-content 对应到主轴，把 align-items 对应到交叉轴。
• 有意识地把一个元素水平加垂直居中，而不是碰运气。

先修条件：第 1 课（display: flex 把 item 摆上主轴） | 上一篇 << 01 | 下一篇 03 >>

你想用 justify-content 把它往下移，它却横着走了

这是 Flexbox 最常见的一种挫败：你想把一个元素往下挪一点，伸手去写 justify-content，元素却横着滑走了。或者你设了 align-items 指望水平居中，结果什么也没发生。这两个属性都没坏。它们各自作用在不同的轴上，而在你能看见这两条轴之前，在它们之间做选择就是抛硬币。这一课先让两条轴现形，再把两个属性各挂到一条轴上。

讲解

flex 容器有两条互相垂直的轴。主轴是 item 排队的那条轴，默认水平，就是第 1 课里的那个方向。交叉轴与主轴垂直¹。在默认的 row 方向下，主轴从左到右，交叉轴从上到下。正式定义也是同一个意思：主轴是 flex item 沿其排布的首要轴，交叉轴与之垂直²。

现在是回报时刻。对齐属性有两个，每个只管一条轴：

• justify-content 让 item 沿主轴对齐，也就是 flex-direction 设定的流动方向¹。
• align-items 让 item 沿交叉轴对齐¹。

所以在默认的 row 下：justify-content 左右移动 item，align-items 上下移动 item。规则就这么多。“justify”管主轴，“align”管交叉轴。当你伸手拿错属性时，元素就沿错误的轴移动，正是那个“想往下、却横着走”的 bug。

下图画了两条轴和两个属性。flex-direction 是 row。点击 justify-content 沿其分布 item 的那条轴。

一旦你能指出这两条轴，居中就不再是背下来的咒语。要居中一个元素，就在两条轴上同时对齐它：justify-content: center 沿主轴居中，align-items: center 沿交叉轴居中³。两个属性，各管一条轴。

下面的容器已经是 display: flex，并且有固定高度，两条轴都有活动空间。把卡片在两个方向上都居中。

如果你只设了 justify-content: center，卡片会左右居中但贴在顶部，因为你只处理了主轴。缺的那第二个属性，正是经典的“为什么水平居中了、垂直没居中?”时刻。

完整示例（跟着做）

你想把一个“Save”按钮钉在工具栏的右边缘，并在工具栏里垂直居中：

顺着轴走一遍：主轴是水平的（row 默认），所以 justify-content: flex-end 把 item 推向主轴终点，也就是右边缘。交叉轴是垂直的，所以 align-items: center 让 item 在 56px 的高度里上下居中。每个属性各自点名了它的轴和位置，没有一步是猜的。

你来试试（填空示例）

你想把一个徽标放到某个 flex 容器的左下角，容器是 display: flex 且设了高度。填上两个值：

答案：justify-content: flex-start（主轴起点是左边缘）和 align-items: flex-end（交叉轴终点是底部）。把每一行读成“哪条轴、哪一端”，角落自然就出来了：左来自主轴，下来自交叉轴。

小结 + 下节课预告

flex 容器有两条互相垂直的轴。justify-content 沿主轴对齐，align-items 沿交叉轴对齐。居中就是两条轴各做一次。但注意我们一直在说“默认水平”，这个默认由 flex-direction 设定，而下一课就要翻转它。一旦主轴从横着指变成竖着指，justify-content 就开始上下移动 item，很多人正是在这个意外上放弃的。我们把它变成显而易见的事。