如何垂直對齊 Flex 項目？

垂直對齊 Flex 項目

Flexbox 提供了一種在容器內排列元素的便捷方法。但是，有時您可能會遇到項目並排呈現而不是按所需的垂直順序呈現的問題。使用 display: flex 時可能會發生這種情況。

要防止 Flex 項目並排渲染，只需將以下樣式加入父元素：

flex-direction: column;

指令指示 Flexbox在列中顯示其子項，而不是

範例：

在提供的程式碼片段中：

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

最初，「square ”和“some text”元素將並排放置。要解決此問題，請添加以下 CSS：

.inner {
  flex-direction: column;
}

這將確保「正方形」位於「某些文字」元素上方，從而實現所需的垂直佈局。

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