如何防止 Flex 項目並排顯示？

防止 Flex 項目並排顯示

Flexbox 提供了一種在區塊內對齊項目的有效方法。但是，如果您遇到希望項目垂直而不是水平顯示的情況，預設的彈性行為可能會成為障礙。

問題陳述：

儘管使用 Flexbox 將項目集中在區塊中，項目繼續並排顯示。期望的結果是每個項目佔據自己的行。例如，橘色方塊應該位於文字上方，但 Flex 將其重新定位到文字旁邊。

解決方案：

解決此問題的關鍵在於添加以下樣式：

.inner {
  flex-direction: column;
}

透過指定「column」作為Flex 方向，我們指示Flexbox垂直顯示其子項目。這解決了問題並按預期定位項目。

更新的程式碼片段：

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

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

<style>
  .container {
    ...
  }

  .inner {
    ...
    flex-direction: column;
  }

  .square {
    ...
  }
</style>

將“flex-direction”屬性設為“column”， Flexbox 元素現在將按行顯示，解決了原來並排定位的問題。

以上是如何防止 Flex 項目並排顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！