如何防止 Flex 專案並排渲染而不是垂直堆疊？

防止Flex 專案並排渲染

使用Flexbox 時，我們經常遇到希望將專案居中的情況區塊，但每個專案佔據自己的行。不幸的是，當我們希望將項目置於彼此下方時，Flexbox 有時會將它們移到一邊。

考慮以下HTML 結構，其中使用帶有justify-content: center 和justify-content: center 的Flexbox 將橙色方塊和文字元素放置在容器內align-items: center:

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

以及關聯的CSS:

.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;
}

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

應用Flexbox後，橘色正方形不是位於文字上方，而是位於側面。為了修正這個問題，我們需要修改內部容器的flex-direction 屬性：

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

設定flex-direction: column 指示Flexbox 垂直顯示其子項，一個在另一個下面，而不是在一行中。此行為符合我們的要求，將橙色方塊放置在文字上方。

以上是如何防止 Flex 專案並排渲染而不是垂直堆疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！