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

Мне нужна помощь с выравниванием 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 полей, но не могу найти правильный путь. Спасибо за любую помощь.

Всего 1 ответ


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

  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 -->


Есть идеи?

10000