Как выровнять 5 коробок с флексом?

Question

Мне нужна помощь по выравниванию 5 блоков в соответствии с предварительным просмотром каркаса по адресу: https://projekty.freshynek.cz/images/hp-wireframe.png

Поле № 1 должно занимать 50% ширины остальные - только 25% ширины контейнера справа от большой коробки.

.flex-container {
  width: 1170px;
  display: flex;
}

.text {
  margin: auto;
}

.flex-item {
  flex-direction: row;
}

.col-first {
  width: 50%;
  flex: 1;
}

.big {
  border-radius: 10px;
  width: 100%;
  height: 300px;
  background-color: pink;
}

.col-second {
  width: 50%;
  flex: 1;
}

.two,
.three,
.four,
.five {
  border-radius: 10px;
  width: 50%;
  height: 150px;
  background-color: turquoise;
}

.three {
  border-radius: 10px;
  width: 50%;
  background-color: turquoise;
}

<div class="flex-container">

  <div class="col-first">

    <div class="big">
      <div class="text">1. big</div>
    </div>

  </div>
  <!-- .col-first -->

  <div class="col-second">

    <div class="two">
      <p>2. small</p>
    </div>

    <div class="three">
      <p>3. small</p>
    </div>

    <div class="four">
      <p>4. small</p>
    </div>

    <div class="five">
      <p>5. small</p>
    </div>

  </div><!-- .col-first -->

</div><!-- .flex-container -->

Я пытался использовать flexbox для выравнивания всех 5 полей, но не могу найти правильный путь. Спасибо за любую помощь.

Answer 1

Вам необходимо добавить следующие css свойства к классу .col-second.

1. display: flex - это необходимо, чтобы вашими ящиками 4 turquoise можно было управлять с помощью flexbox. После применения display:flex к .col-second он будет выступать в качестве родительского контейнера для этих блоков.
2. flex-wrap: wrap - это необходимо для того, чтобы, когда элементы (всего) превышали ширину родительского, они переходили в следующая строка Без этого ваши 4 turquoise ящики останутся в одном ряду, а не в двух. flex-wrap будет работать, только если у вас есть display:flex для того же элемента.

Прилагается рабочий фрагмент.

Подробнее о сгибании здесь

.flex-container {
  width: 1170px;
  display: flex;
}

.text {
  margin: auto;
}

.flex-item {
  flex-direction: row;
}

.col-first {
  width: 50%;
  flex: 1;
}

.big {
  border-radius: 10px;
  width: 100%;
  height: 300px;
  background-color: pink;
}

.col-second {
  width: 50%;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.two,
.three,
.four,
.five {
  border-radius: 10px;
  width: 50%;
  height: 150px;
  background-color: turquoise;
}

.three {
  border-radius: 10px;
  width: 50%;
  background-color: turquoise;
}

<div class="flex-container">

  <div class="col-first">

    <div class="big">
      <div class="text">1. big</div>
    </div>

  </div>
  <!-- .col-first -->

  <div class="col-second">

    <div class="two">
      <p>2. small</p>
    </div>

    <div class="three">
      <p>3. small</p>
    </div>

    <div class="four">
      <p>4. small</p>
    </div>

    <div class="five">
      <p>5. small</p>
    </div>

  </div><!-- .col-first -->

</div><!-- .flex-container -->