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

您可以使用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>

Answer 2

Bootstrap 4包含您需要的所有flexbox实用程序。只要确保容器是全高的即可。

<div id="app" class="d-flex mvh-100 flex-wrap">
    <div class="w-50" style="background-color:red"></div>
    <div class="w-50" style="background-color:blue"></div>
    <div class="w-50" style="background-color:yellow"></div>
    <div class="w-50" style="background-color:grey"></div>
</div>

演示：https://www.codeply.com/go/6UXPnSgPCs

Bootstrap 4 Flexbox将屏幕分为4部分

2 个答案: