Bootstrap 4 Flexbox делит экран на 4 части

Question

Как я могу разделить мой экран с помощью начальной загрузки 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

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

Answer 2

Вы можете использовать минимальную ширину и высоту 50%, а также обернуть флекс, а также установить контейнер для флекс 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>