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

防止Flex 專案並排渲染

問題：

使用Flexbox 將元素區塊中遇到這樣的問題：項目並排出現，而不是垂直位於彼此下方。在某些情況下，這可能是不可取的。

解決方案：

要防止Flex 項目並排渲染，請實現以下CSS 樣式：

.inner {
  flex-direction: column;
}

說明：

此樣式屬性指定彈性項目在容器元素內排列的方向。將 flex-direction 設為 column，您可以指示 Flexbox 在行而不是列中顯示其子項。這將根據需要將項目垂直排列在彼此下方。

更新的範例：

以下更新的程式碼片段示範了此解決方案的工作原理：

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

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

透過利用flex-direction: column，橙色方塊和文字現在可以在容器元素內正確垂直堆疊，如下所示有意為之。

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