使用bootstrap flexbox将div堆叠在一起[重复]答案

【问题标题】：Stack divs on top of each other using bootstrap flexbox [duplicate]使用bootstrap flexbox将div堆叠在一起[重复]
【发布时间】：2021-01-24 04:45:06
【问题描述】：

对于新手帖子感到抱歉，但我是 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 填充剩余的空间。

我一直在关注bootstrap 的文档来学习。我还可以查看哪些其他资源？

感谢您的帮助。

【问题讨论】：

标签： css bootstrap-4 flexbox

【解决方案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>

【讨论】：

【解决方案2】：

通常有几个属性要确保在父级和每个子级上设置，以便让弹性项目表现出人们所期望的那样。

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

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

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

如果您希望封闭的 DIV 更高以使您的 flex 项目伸展得更高，您可以考虑设置包装器的最小高度。例如，请参阅How can I make my flexbox layout take 100% vertical space? 或 flexbox + bootstrap 4. How to stretch child of .col-**-*?

如果您希望某个项目占可见窗口空间的 50%，您可以在该对象上使用此 css：min-height: 50vh;

【讨论】：

谢谢你的链接，是的，我想让盒子更高。我希望 flexbox 1 占页面的 50%（或 n%），并让 flexbox 2 占据剩余空间。
当你说 50% 的页面时，你的意思是 50% 的可见窗口空间吗？请参阅编辑后的答案。