為什麼 `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中文網其他相關文章！