html - Bootstrap 4 Flexbox 将屏幕分成 4 部分

Question

如何使用 bootstrap 4 和 flexbox 将我的屏幕分成 4 个宽度和高度完全相同的部分。

每个应该有 50% 的宽度和高度。

他们也有响应(每个内容)。

到目前为止，我尝试了以下但没有成功:

    <div id="app" class="flex-container">
        <div class="flex-item" style="background-color:red"></div>
        <div class="flex-item" style="background-color:blue"></div>
        <div class="flex-item" style="background-color:yellow"></div>
        <div class="flex-item" style="background-color:grey"></div>
    </div>


.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex-basis: 50%;
    flex-grow: 1;
    flex-shrink: 1;
}

Answer 1

您可以使用 min-width 和 height 的 50%，并包裹 flex，同时将 flex 容器设置为 100 vh。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.flex-item {
  min-width: 50%;
  min-height: 50%;
}

<div id="app" class="flex-container">
  <div class="flex-item" style="background-color:red"></div>
  <div class="flex-item" style="background-color:blue"></div>
  <div class="flex-item" style="background-color:yellow"></div>
  <div class="flex-item" style="background-color:grey"></div>
</div>