为什么 `justify-content: center` 文本在 Flex 容器中换行时不居中？

文本未以 justify-content: center 居中

当 Flex 容器内的内容变得过长时，会出现此问题，导致换行。虽然内容使用 justify-content: center 水平居中，但在换行过程中对齐会被打乱。

理解 Flexbox 中的三个级别

Flex 容器结构由三个级别组成：

• 容器
• 项目
• 内容

每个级别代表一个独立元素。

Flex 容器中的对齐方式

justify-content 控制容器内 Flex 项目的对齐方式，但它不会直接影响该项目的子项目（在本例中为文本）。

当Flex 容器的宽度超过内容的宽度，Flex 项目会缩小以适应内容（shrink-to-fit）并水平居中。项目内的内容自动遵循此对齐方式。

内容超出 Flex 容器时的对齐方式

但是，当内容变得比 Flex 容器宽时，Flex 项目可以不再对齐。由于该项目占据了整个容器宽度，因此没有足够的可用空间来对齐。

文本对齐

尽管未对齐，但 text-align: center 从未应用于默认文本。要直接居中，必须将 text-align: center 显式添加到 Flex 项目或 Flex 容器。

代码示例

<code class="css">article {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}</code>

<code class="html"><article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article></code>

以上是为什么 `justify-content: center` 文本在 Flex 容器中换行时不居中？的详细内容。更多信息请关注PHP中文网其他相关文章！