如何確保 Flexbox 子項佔用可用的垂直空間？

確保Flexbox 子項佔據可用的垂直空間

當使用具有多列的Flexbox 佈局時，可能希望子項佔據不同的垂直空間高度以充分利用可用空間，而不是受限於該行最高的高度

解決問題

Flexbox 行的自然行為是在指定空間內垂直對齊項目。不過，為了防止item拉伸到行的整個高度，可以使用align-items屬性來控制垂直對齊。

解決方案

來實現想要的行為，將align-items屬性設定為flex-start：

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

這將允許孩子們保留其固有高度，同時保持行的垂直對齊。

其他選項

如果所需的佈局需要更複雜的間距行為，請考慮使用列方向或多列模組來實現期望的結果。有關更多信息，請參閱 https://stackoverflow.com/a/20862961/1652962 上的綜合 SO 答案。

以上是如何確保 Flexbox 子項佔用可用的垂直空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！