使用引导程序flexbox将div堆叠在一起

Question

很抱歉收到新手的帖子，但我是bootstrap的新手(使用4.0版(，已经读了很多书，但未能完成将两个div堆叠在一起的简单任务。

<div class="d-flex flex-column">
<div style="background: blueviolet">
Flex item 1
</div>
<div style="background: burlywood">
Flex item 2
</div>
</div>

我的目标是让Flexbox 1占据50%的高度，Flexbox 2占据剩余的高度，或者让Flexbox 1占据40%的高度，让Flexbox 2占据剩余的空间。

我一直在学习引导程序文档。我还可以调查哪些其他资源？

谢谢你的帮助。

Answer 1

您可以使用类flex-fill自动填充其余空间。

尝试调整类.item-1的高度以查看结果。

https://jsfiddle.net/ramseyfeng/bqvwcLe5/1/

html,body {
height: 100%;
}
.item-1 {
height: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-column h-100">
<div style="background: blueviolet" class="item-1">
Flex item 1
</div>
<div style="background: burlywood" class="flex-fill">
Flex item 2
</div>
</div>

Answer 2

通常有几个属性需要确保在父项和每个子项上设置，以便使flex项按照预期的方式运行。

看看这个方便的摘要：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

你也可以参考这个：https://www.w3schools.com/css/css3_flexbox.asp

您的示例显示为两个div，一个垂直地位于另一个之上。这不是你想要的吗？还是你只是想让他们更高？

如果你想让你的封装DIV更高，以使你的柔性项目拉伸得更高，你可以考虑设置包装的最小高度。例如，请参阅如何使flexbox布局占用100%的垂直空间？或者flexbox+bootstrap 4。如何拉伸.col-***的孩子？

如果你想让一个项目占可见窗口空间的50%，你可以在这个对象上使用这个css：min-height: 50vh;