如何使元素垂直填充 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中文网其他相关文章！