Flexbox垂直填充可用空间 [英] Flexbox fill available space vertically

问题描述

现在在flexbox行中，我可以编写

 < div layout =row> 
< div>部分内容< / div> 
< div flex>< / div> <！ - 填充/增加可用空间 - > 
< div>其他内容< / div> 
< / div> 
  

我想实现同样的效果，但是垂直方向，如图片

目前的问题是，需要增长的div没有任何高度，所以这两个内容低于彼此。我希望我的第二个内容位于具有修复高度的父容器的底部！我知道我可以通过定位第二个内容绝对和 bottom：0; 来解决这个问题，但是我可以使用flexbox来实现吗？

1. flex-direction：column 为flex容器。




2. flex：1

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

< margin：0;} * {box-sizing：border-box;}。row {display：flex; flex-direction：列; height：100vh;}。flex {flex：1;}。row，.row> * {border：1px solid;}

< div class = 行 > < div>某些内容< / div> < div class =flex>这会填充可用空间< / div> <！ - 填充/增加可用空间 - > < div>其他内容< / div>< / div>

p>干杯！

Now in a flexbox row I can write

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

I would like to achieve the same but vertically, like on this picture Currently the problem is that the div which would need to grow doesn't have any height so the two contents are below each other. I want my second content to be at the bottom of the parent container which have a fix height! I know I could solve this by positioning the second content absolute and bottom: 0; but can I achieve this with flexbox?

解决方案

So you can try this:

1. flex-direction: column for the flex container.

2. flex: 1 for the element that needs to fill the remaining space.

See demo below where the flexbox spans the viewport 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>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

Cheers!

这篇关于Flexbox垂直填充可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！