如何使用 Flexbox 垂直分配空間？

垂直 Flexbox 空間分佈

處理行中的 Flexbox 佈局時，填充可用空間很簡單。您可以在元素上使用 flex: 1 來指示它應該佔用任何剩餘空間。然而，垂直實現這一點可能有點棘手。

垂直 Flexbox

要實現垂直空間分佈，請考慮以下步驟：

1. 設定父容器的 Flex-到列的方向。
2. 要讓元素填充剩餘空間，請將其分配為flex： 1.

範例

這裡有一個程式碼示範：

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

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

在這個例子中，中間元素上的flex類別表明它應該佔據垂直列中的剩餘空間，將其他元素推到頂部和底部。

以上是如何使用 Flexbox 垂直分配空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！