Flexbox 的列方向布局看似简单，真正动手时却容易在水平对齐上卡住。容器一旦设置 display: flex 和 flex-direction: column，主轴变为垂直方向，交叉轴变为水平方向。此时 justify-content 负责的是元素在垂直方向上的分布，而水平对齐必须交给 align-items 或单个子项的 align-self。轴线角色交换是对齐失效的根本原因，理解这一点后再调整内联元素就不会用错属性。

列方向容器中的轴线切换

在默认的 flex-direction: row 下，主轴是水平的，交叉轴是垂直的。这时想要水平居中一个元素，通常会使用 justify-content: center，它沿主轴分配剩余空间。但把 flex-direction 改成 column 后，主轴旋转了 90 度，justify-content 的作用范围也随之旋转。于是很多开发者会看到：明明设置了 justify-content: center，元素在水平方向却没有任何变化，反而在垂直方向移动了位置。

为什么会这样？Flexbox 规范中，justify-content 永远作用于主轴，align-items 和 align-self 永远作用于交叉轴。所以当主轴变成垂直方向后，水平对齐就不再由 justify-content 控制，而是由交叉轴对齐属性接管。例如下面的代码就可以让一个子元素在列方向容器中水平居中：

.column-box {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  height: 200px;
}

如果混淆了这两类属性，就会出现“元素只上下移动、不左右移动”的现象。这个规则不区分子元素是块级还是内联级，只要它们处在同一个 Flex 容器中，主轴与交叉轴的对应关系就是固定的。

内联元素进入Flex容器后的“块级化”与宽度表现

HTML 中的 <span>、<a>、<em> 等默认都是内联元素，它们的宽度由内容撑开，并且多个内联元素可以在同一行内依次排列。然而一旦这些元素被放进 Flex 容器，它们就不再按照普通的内联格式参与布局，而是被转换为 Flex 项目。根据 Flexbox 规范，Flex 容器的子元素会生成块级化的盒子，其 display 计算值会被改写为 block 或 list-item 等，即使原始标签是内联元素。

这种块级化带来的直接影响是：在列方向容器中，每个内联元素都会独占一行，因为主轴是垂直方向，主轴的排列顺序就是从上到下逐个放置项目，而不是让它们像普通文本那样水平流动。与此同时，交叉轴是水平方向，如果容器没有显式设置 align-items，默认值是 stretch，Flex 项目会尽量拉伸填满交叉轴。也就是说，一个没有指定宽度的 <span> 在列方向容器中会被横向拉满，看起来就像块级元素。

<div class="column-box">
  <span class="tag">内联元素一</span>
  <span class="tag">内联元素二</span>
</div>

.column-box {
  display: flex;
  flex-direction: column;
  /* 默认 align-items: stretch */
}
.tag {
  background: #eef2ff;
}

上面的示例中，两个 <span> 会上下堆叠，并且宽度被拉伸到与容器相同。若只想要内容宽度并让元素水平居中，就需要把 align-items 改为 center，或者给单个项目设置 align-self: center。这里还需要注意：text-align 是作用在元素内部文本行上的，它无法改变 Flex 项目本身在交叉轴上的位置，因此不要用 text-align: center 去试图居中 Flex 项目。

实现单元素水平对齐的三种写法

如果列方向容器里只有一个内联元素，例如一个状态标签或者徽章，要实现水平对齐，最直接的方式是修改容器上的 align-items。align-items 的取值有 flex-start、center、flex-end、stretch 和 baseline，它们分别对应靠左、居中、靠右、拉伸和基线对齐。在交叉轴为水平方向的情况下，这些值控制的就是元素的水平位置。

例如希望标签靠左排列，可以写成：

.status-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

如果希望标签居中，但其他子项保持默认拉伸，可以使用单个项目的 align-self: center。align-self 会覆盖容器上的 align-items 设置，只影响当前项目，这在混合对齐场景中非常实用。

.status-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 其他项仍然拉伸 */
}
.status-bar .badge {
  align-self: center;  /* 仅徽章水平居中 */
  width: auto;
}

第三种写法是结合 margin 自动分配空间的特性。在 Flex 布局中，交叉轴方向上的 auto 外边距也会吸收剩余空间。比如在列方向容器中，给某个子项设置 margin-left: auto，它会贴到容器右侧；设置 margin-right: auto，则会贴到左侧；左右都设为 auto，就能实现水平居中。相比 align-items，这种方法在需要精确定位或与相邻项目产生间距时更灵活。

.column-box {
  display: flex;
  flex-direction: column;
}
.center-by-margin {
  margin-left: auto;
  margin-right: auto;
}

这三种写法并不冲突，可以根据布局需求组合使用。需要注意，如果子项宽度已经拉伸为容器宽度，margin: auto 的水平居中效果会失效，因为没有剩余空间可分配。

多个内联元素并排：列方向容器里的嵌套方案

很多场景下，我们希望多个内联元素仍能像普通文本那样从左到右排成一行，但外层又需要保持列方向布局。比如一个垂直排列的卡片列表中，顶部标签栏需要水平显示多个标签。这时候直接把多个 <span> 放进 flex-direction: column 的容器是不行的，因为每个 <span> 都会作为独立的 Flex 项目上下堆叠，而不是并排成行。

解决办法是根据结构拆分层级：外层继续保持列方向的 Flex 布局，把需要并排的内联元素放进一个横向 Flex 容器里。这个嵌套的容器可以设置 display: flex 并且默认为 row 方向，也可以使用 display: inline-flex，让它本身作为一个内联级 Flex 容器，便于和外层项目的对齐策略配合。

<div class="card-list">
  <div class="tag-row">
    <span>前端</span>
    <span>Flexbox</span>
    <span>响应式</span>
  </div>
  <div class="tag-row">
    <span>布局</span>
    <span>对齐</span>
  </div>
</div>

.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.tag-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.tag-row span {
  padding: 4px 10px;
  background: #f2f4f8;
}

这样做的好处是内层 .tag-row 内部的 <span> 会重新变回横向 Flex 项目，按照默认主轴从左到右排列，同时它们的对齐方式还可以单独用 justify-content 控制。而外层 .card-list 仍然保持垂直方向的项目排列，可以使用 align-items 控制每个标签行在水平方向上的位置，比如靠左、居中或靠右。

也有开发者会想到把多个内联元素合并成一个块级包装元素，再对这个包装元素做水平对齐。这本质上和嵌套 Flex 容器思路一致，只是包装元素内部如果不使用 Flex，可能需要依赖 text-align 或者 display: inline-block。如果内部项目数量不固定、需要等宽分布或自动换行，嵌套 Flex 容器仍然是更稳健的选择。

常见误区：justify-content、text-align与stretch的混淆

在列方向容器中调整水平对齐时，最容易出错的是继续使用 justify-content。由于该属性只沿主轴起作用，而列方向的主轴是垂直的，所以 justify-content: center 只会让项目在垂直方向居中。如果项目高度没有占满容器，这种效果还能被观察到；一旦项目高度占满，就会误以为 justify-content 没有生效。

另一个常见的混淆点是 text-align。text-align 影响的是块级容器内部的行内内容，比如文字在 <span> 内部的对齐位置，而无法影响 Flex 项目本身的位置。例如给一个 display: flex; flex-direction: column 的容器设置 text-align: center，它的子项不会水平居中，只有子项内部的文字会在自己的内容区内居中。想控制 Flex 项目位置，应该使用 align-items 或 align-self。

此外，stretch 作为 align-items 的默认值，也会造成一些意外效果。如果列方向容器中的内联元素没有设置宽度，它会被横向拉伸填满容器。对于很多标签、按钮、状态点来说，这并不符合预期。此时需要显式把 align-items 改成 flex-start、center、flex-end，或给元素设置一个具体宽度，以避免被拉伸。