Flexbox 父对齐项覆盖子对齐内容

Question

在下面的代码中，如果我注释掉 flex-column 中的align-items 行，背景是灰色的，图标之间有空格。如果我取消注释align-items，则背景为蓝色且图标居中。

我认为align-items 和justify-content 是相互正交的——为什么align-items 会影响子flexbox 容器中的flexbox 间距问题？宽度不是从 100% 开始的吗？

我认为它只会管理其直接子代。此外，当align-items 处于活动状态时，整个区域都是蓝色的，我至少不应该看到图标的背景是灰色的吗？

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: blue;
}

.flex-row {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: gray;
}

  <div class="flex-column">
      <div>Some Content0</div>
      <div>Some Content1</div>
      <div class="flex-row" style='border: solid;'>
        <img src="update.svg" style="max-width: 20px;">
        <img src="update.svg" style="max-width: 20px;">
      </div>
      <div>Some Content2</div>
      <div>Some Content3</div>
  </div>

Answer 1

父弹性容器设置为列方向。这意味着主轴是垂直的，横轴是水平的。

align-items 属性仅适用于横轴。

所以当你将容器设置为：

align-items: center

...孩子 (.flex-row) 水平居中。

基本上，弹性项目两侧的所有可用空间都被消耗掉，导致项目居中。

显示父级的背景色（蓝色）是因为子级的背景色（灰色）已被挤压到中心，位于图像的后面。

---

当您在父级上禁用align-items: center 时，默认stretch 值会在子级上恢复。

子 (.flex-row) 与其父不同，是一个行方向容器。所以主轴是水平的，横轴是垂直的。

justify-content 属性仅适用于主轴。所以在这种情况下，它的工作方向与父级上的align-items 相同。

在子容器上使用justify-content: space-between，在父容器上使用align-items: stretch，图像和子容器的灰色背景颜色可以访问容器的整个长度。

---

宽度不是从 100% 开始的吗？

通常，是的。但无论如何，您已经用居中覆盖了全长。

也许您认为只有内容（图像）应该居中，而不是弹性项目。这不是它的工作原理。弹性容器中有三个独立的级别：

• 容器
• 项目
• 内容

这里有一个更完整的解释（它侧重于 Grid，但概念也适用于 flex）：

• Centering in CSS Grid

---

在此处了解有关沿主轴的 flex 对齐的更多信息：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在此处了解有关沿交叉轴的 flex 对齐的更多信息：

• How does flex-wrap work with align-self, align-items and align-content?

Answer 2

在 flex 列 容器上，align-items 影响横轴（水平），并使用其默认值 stretch，使其 flex 项填充其宽度（为 100% 宽）。

当您将其更改为 center 时，将由项目宽度控制它们是否填充其父级的宽度，并且由于您没有，它们将按照您告诉他们的那样 ( align-items: center)，很好地居中。