如何讓元素垂直填滿 Flexbox 中的可用空間？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-12-03 08:33:09

原創

145 人瀏覽過

How Can I Make an Element Vertically Fill Available Space in a Flexbox?

Flexbox：垂直填充可用空間

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

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

要達成此目的：

為 Flex 容器設定 flex-direction: 欄位。
分配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中文網其他相關文章！