Flexbox垂直填充可用空间

Question

现在我可以写flexbox行

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

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

我知道我可以通过将第二个内容定位为绝对bottom: 0;来解决此问题，但是我可以使用flexbox实现此目的吗？

Answer 1

所以你可以试试这个：

1. flex-direction: column用于弹性容器。

2. flex: 1表示需要填充剩余空间的元素。

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

＆＃13;
＆＃13;
body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

干杯！

Answer 2

您只需在父级使用flex-direction: column，在中级div使用flex: 1。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;