Flexbox垂直填充可用空间

Posted 2021-03-27

现在在flexbox排我可以写

<div layout="row">
  <div>some content</div>
  <div flex></div> <!-- fills/grows available space -->
  <div>another content</div>
</div>

我希望实现相同但垂直，就像在这张图片上目前问题是需要增长的div没有任何高度，因此两个内容相互低于。我希望我的第二个内容位于具有固定高度的父容器的底部！

我知道我可以通过定位第二个内容绝对和bottom: 0;来解决这个问题，但我能用flexbox实现这个目标吗？

答案

所以你可以尝试这个：

1. flex-direction: column用于柔性容器。
2. flex: 1表示需要填充剩余空间的元素。

请参阅下面的演示，其中flexbox跨越视口高度：

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>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

另一答案

你只需要在父级上使用flex-direction: column，在中间div上使用flex: 1。

body,
html {
  padding: 0;
  margin: 0;
}
.row {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.row > div:not(.flex) {
  background: #676EE0;
}
.flex {
  flex: 1;
  background: #67E079;
}

<div class="row">
  <div>some content</div>
  <div class="flex"></div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

以上是关于Flexbox垂直填充可用空间的主要内容，如果未能解决你的问题，请参考以下文章

垂直对齐元素，下方2/3空间以上1/3空间

如何使 flexbox 元素填充剩余空间并滚动？

使 flexbox 中的项目占据所有垂直和水平空间

flexbox布局

如何使用 Bootstrap 4 flexbox 填充可用内容？

C3弹性盒子及弹性布局