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

Flexbox：垂直填充可用空間

在 Flexbox 行中，在元素上使用 Flex 可以使其增長並填充剩餘的可用空間。現在，問題出現了：我們可以垂直複製這種行為嗎？

在所描述的場景中，您有一個 Flexbox 行，您希望其中一個元素垂直跨越父容器的高度，即使該容器具有固定高度。將元素絕對定位到底部時：0；是一個可行的解決方案，使用 Flexbox 尋求所需的結果。

要達成此目的：

1. 為 Flex 容器設定 flex-direction: 欄位。
2. 分配flex: 1 到應該佔據剩餘空間的元素。

這是一個demo:

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

body { margin: 0 }
*, ::before, ::after { box-sizing: border-box; }
.row {
  display: flex;
  flex-direction: column;
  height: 100vh
}
.flex { flex: 1 }
.row, .row > * { border: 1px solid; }

在此範例中，flexbox 元素的 flex: 1 會根據需要填充父容器的整個垂直空間。

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