文字未以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中文網其他相關文章！
