如何讓 Flexbox 兒童利用可用空間來劃分不同的高度？

確保Flexbox 子項利用可用空間實現獨立高度

問題：

在具有兩列的Flexbox 佈局中，如何不同尺寸的元素是否可以分佈以填充整個可訪問區域，而不是與最高的元素具有相同的高度element?

上下文：

使用flexbox的flex-wrap屬性，我們可以將元素包裝到多行。但是，預設情況下，行中的所有元素往往與該行中最高的元素具有相同的高度。如果我們希望元素保持其自然高度，這可能是不可取的。

範例：

考慮以下程式碼：

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex: 1 auto;
}

答案：

答案：

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Fbox 繼承自box設計行的行為如上所述。 Flexbox 並不打算模仿 Masonry 風格的佈局，其中行元素可以擴展到相鄰行的空間。使用align-items調整元素高度的選項有限：作為替代方案，請考慮使用列方向或探索多列模組以獲得更多自訂選項。

以上是如何讓 Flexbox 兒童利用可用空間來劃分不同的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！