在CSS布局中，实现精准对齐是前端开发的基本功。

说到Flexbox布局，align-items和justify-content这对属性出场率极高，但用错的情况也屡见不鲜。

今天，我们就来彻底理清它们各自的职责和配合方式。

一、align-items：控制交叉轴对齐

1. 核心原则与作用对象

首先要明确一个核心原则：align-items是作用于父容器的属性。

它只对设置了display: flex或display: grid的容器生效。

其职责是控制所有子元素在交叉轴（cross axis）上的对齐方式。

2. 理解“交叉轴”

这里的关键在于理解“交叉轴”。在Flex布局中：

• 主轴方向由flex-direction决定。
• 交叉轴则垂直于主轴。

举个例子：

• 当flex-direction: row（默认值）时，主轴是水平方向，交叉轴就是垂直方向。此时，align-items管的就是子元素的上下对齐。
• 如果换成flex-direction: column，主轴变为垂直方向，交叉轴则成了水平方向。这时，align-items控制的就是子元素的左右对齐。

常见误区：直接给子元素设置align-items——这完全是无效操作，因为它根本不是子元素的属性。

3. 常用属性值

它的几个常用值决定了不同的对齐效果：

• align-items: flex-start：子元素紧贴交叉轴的起点对齐（例如在row布局下就是顶部对齐）。
• align-items: center：子元素在交叉轴上居中对齐，这是最常用的值。
• align-items: stretch：默认值。子元素会被拉伸以填满容器在交叉轴方向上的尺寸，除非子元素自身设置了固定的高度或宽度。
• align-items: baseline：所有子元素按照其第一行文字的基线进行对齐。这个值在处理文字与图标混合排版时特别有用。

二、justify-content：控制主轴对齐

1. 作用与主轴方向

如果说align-items管的是“交叉轴”，那么justify-content管的则是“主轴”。

它同样只在display: flex的容器上有效，负责控制子元素在主轴（main axis）上的分布方式。

这里有一个至关重要的点：主轴的方向由flex-direction决定。

• flex-direction: row（默认） → 主轴为水平方向 → justify-content控制左右分布。
• flex-direction: column → 主轴为垂直方向 → justify-content控制上下分布。

2. 核心属性值

它的几个核心值定义了不同的空间分配逻辑：

• justify-content: flex-start：所有子元素紧贴主轴的起点（左或上）堆放。
• justify-content: space-between：首尾两个子元素分别紧贴容器的两端，剩余的子元素在中间等距分布。
• justify-content: space-evenly：所有子元素之间的间隔，包括第一个元素之前和最后一个元素之后的间隔，都完全相等。这通常比space-around产生的视觉效果更均匀。

3. 重要注意事项

justify-content处理的是多个子元素之间的空间“分布”。

如果容器里只有一个子元素，谈论“分布”就失去了意义。在这种情况下，想要实现居中，使用margin: auto往往是更直接的选择。

三、两者联用的典型组合

当这两个属性联手时，就能轻松实现各种复杂的对齐需求，尤其是各种居中场景。

但前提是，必须确保父容器是一个Flex容器，并且拥有明确的尺寸——特别是在实现垂直居中时，父容器必须有一个确定的高度。

1. 经典居中示例

一个经典的例子是让一个元素在页面中完全居中：

.container {
  display: flex;
  align-items: center;     /* 交叉轴（垂直）居中 */
  justify-content: center; /* 主轴（水平）居中 */
  height: 100vh;           /* 关键：必须设置高度，否则垂直居中无效 */
}

2. 实战中容易踩的坑

• 如果父容器的高度是靠内部内容撑开的（即没有显式设置height），那么align-items: center可能会看起来“没有反应”，根本原因就是交叉轴方向没有足够的空间可供对齐。
• justify-content: center + align-items: center 是最常见的居中组合，但在使用前，务必检查父容器是否设置了height或min-height。
• 虽然在Grid布局中也能使用这两个属性，但Grid提供了更精细的对齐控制（如justify-self、align-self），这些属性的优先级更高。

四、兼容性与常见问题

尽管align-items和justify-content在现代浏览器中支持度已经非常好，但在处理一些老旧项目或特定场景时，兼容性问题依然不容忽视。

• IE10–IE11支持不全：这两个浏览器对部分属性值支持不完整。例如，space-evenly完全不支持；stretch在某些情况下行为可能异常。如果需要兼容IE，应避免使用space-evenly，可以考虑用space-around替代，或者通过JavaScript计算边距来实现类似效果。
• baseline对齐的波动性：align-items: baseline的对齐效果会受到字体、行高（line-height）等因素的影响，在不同环境下表现可能不一致。因此，在对齐精度要求极高的场景下需谨慎使用。
• 属性冲突：在Flex容器内的子元素上设置vertical-align是无效的，这个属性只对inline或inline-block元素起作用。
• 移动端特定Bug：旧版本的移动端Safari浏览器中，align-items: stretch在某些复杂的嵌套布局下可能出现渲染错误。一个可行的解决方案是，在子元素上显式设置align-self: stretch来强制拉伸。

总结

在实际编写代码时，可以遵循一个简单的排查流程：

1. 首先确认父容器是否设置了display: flex。
2. 接着明确当前的主轴方向（flex-direction）。
3. 最后根据需求选择正确的属性和值。

当对齐效果失效时，十有八九是这三个环节中的某一个出了问题：要么容器没有设置高度，要么忘了设置display: flex，要么就是把属性用错了对象。