文本未以 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中文网其他相关文章！
