Flexbox 垂直填充可用空间答案

【问题标题】：Flexbox fill available space verticallyFlexbox 垂直填充可用空间
【发布时间】：2017-02-22 13:45:05
【问题描述】：

现在我可以在flexbox 行中写入

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

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

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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您只需要在父级上使用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>

【讨论】：

【解决方案2】：

所以你可以试试这个：

flex-direction: column 用于弹性容器。
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>

干杯！

【讨论】：

我永远感激不尽