如何使用 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中文网其他相关文章！