如何讓 Flexbox 元素填滿可用的垂直空間？

Flexbox：填充可用的垂直空間

在水平Flexbox 行中，在元素上使用「flex」屬性可以使其增長並擴展填充可用的水平空間。如果你想在垂直方向上達到類似的效果呢？

挑戰在於確保垂直元素擴展以填充剩餘空間，從而允許其他元素垂直堆疊。為了解決這個問題，您可以使用以下 Flexbox 屬性：

• flex-direction：Flex 容器上的欄位 垂直而不是水平對齊元素。
• flex: 1 在應該填充剩餘空間的元素上允許它增長並佔據剩餘空間height.

考慮以下示例：

在此設定中，.row容器具有瀏覽器視窗的固定高度，使用高度：100vh。 .flex 元素具有 flex: 1，使其擴展並填充剩餘的垂直空間。結果，另外兩個元素在 .row 容器內垂直堆疊。

以上是如何讓 Flexbox 元素填滿可用的垂直空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！