保持 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中文網其他相關文章！
