现在我可以写一个flexBox行
<div layout="row"> <div>some content</div> <div flex></div> <!-- fills/grows available space --> <div>another content</div> </div>
我希望实现相同但垂直,就像在这张照片上
目前的问题是需要增长的div没有任何高度,因此两个内容相互低于.我希望我的第二个内容位于具有修复高度的父容器的底部！我知道我可以通过将第二个内容定位为绝对和底部来解决这个问题：0;但我可以用flexBox实现这个目标吗？
解决方法
所以你可以尝试这个：
> flex-direction：flex容器的列.
> 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>
干杯!
