如何使 Flexbox 元素填充可用的垂直空间？-css教程-PHP中文网

如何使 Flexbox 元素填充可用的垂直空间？

Linda Hamilton

发布： 2024-12-02 18:05:17

原创

624 人浏览过

How Can I Make a Flexbox Element Fill Available Vertical Space?

Flexbox：填充可用的垂直空间

在水平 Flexbox 行中，在元素上使用“flex”属性可以使其增长并扩展填充可用的水平空间。如果你想在垂直方向实现类似的效果怎么办？

挑战在于确保垂直元素扩展以填充剩余空间，从而允许其他元素垂直堆叠。为了解决这个问题，您可以使用以下 Flexbox 属性：

flex-direction：Flex 容器上的列 垂直而不是水平对齐元素。
flex: 1 在应该填充剩余空间的元素上允许它增长并占据剩余空间height.

考虑以下示例：

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>

登录后复制

在此设置中，.row 容器具有浏览器视口的固定高度，使用高度：100vh。 .flex 元素具有 flex: 1，使其扩展并填充剩余的垂直空间。结果，另外两个元素在 .row 容器内垂直堆叠。

以上是如何使 Flexbox 元素填充可用的垂直空间？的详细内容。更多信息请关注PHP中文网其他相关文章！