如何垂直對齊 Flex 項目而不是水平對齊？

保持 Flex 項目垂直對齊

使用 Flexbox 居中元素時，當項目水平而不是垂直堆疊時，有時會令人沮喪。當彈性項目具有自然的內聯流（例如文字或圖像）時，就會出現此問題。

問題：

考慮以下程式碼片段：

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="inner">
  <div class="square"></div>
  <p>some text</p>
</div>

目的是將橘色方塊和.inner 容器內的文字居中。但是，輸出將並排顯示正方形和文本，文本被中途截斷。

解決方案：

要修正此行為，我們需要改變內部容器的彎曲方向。預設情況下，flexbox 水平顯示其子項。為了使它們垂直堆疊，我們將 flex-direction 屬性設為 column。

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

此更新的程式碼片段將強制 Flex 專案垂直對齊，解決並排堆疊問題。

更新的輸出：

橘色方塊現在將按照最初的預期出現在文字上方。當您想要確保某些元素在 Flex 容器內以特定方式保持對齊時，這是一種有用的技術。

以上是如何垂直對齊 Flex 項目而不是水平對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！