Как заставить элементы двух столбиков в FLEX контейнере "растечься" по высоте бОльшего столбика?

Question

Есть 6 элементов, распределенных в два столбика. По умолчанию, они прилипают друг к другу, но марджинами их красиво отделить не получиться - divы разной высоты. Поэтому нужно, чтобы их высоты были одинаковы, верхние элементы равнялись между собой, а элементы в меньшей колонке растекались по всей ее высоте. К тому же нужно, чтобы на адаптиве можно было разместить все в один столбик.

Для наглядности прикладываю пикчу. Я знаю, что на bootstrap это можно было бы сделать в два счета, но в ТЗ заказывали ванильный css/html. Заранее спасибо!

Как получается:

Как надо:

Код:

.reason {
  padding-top: 9rem;
}

.reason-blocks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.reason-block {
  -ms-flex-preferred-size: 34%;
  flex-basis: 34%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.reason-block__img {
  font-size: 4.9rem;
  color: #f6b819;
}

.reason-block__text {
  font-family: Roboto;
  font-size: 18px;
  margin-left: 3rem;
}

.reason-block__title {
  font-weight: 700;
  margin-bottom: 3rem;
}

.reason-block__descript {
  font-weight: 400;
}

<div class="reason-blocks">
  <div class="reason-block">
    <div class="icon- reason-block__img"></div>
    <div class="reason-block__text">
      <h3 class="reason-block__title">Доступность
      </h3>
      <!-- /.reason-block__title -->
      <p class="reason-block__descript">
        Ваша компания будет открыта к новым предложениям 24/7</p>
      <!-- /.reason-block__descript -->
    </div>
  </div>
  <!-- /.reason-block -->
  <div class="reason-block">
    <div class="icon- reason-block__img"></div>
    <div class="reason-block__text">
      <h3 class="reason-block__title">Имидж
      </h3>
      <!-- /.reason-block__title -->
      <p class="reason-block__descript">
        Хороший сайт — это красноречивое подтверждение стабильности и уверенности компании в будущем</p>
      <!-- /.reason-block__descript -->
    </div>
  </div>
  <!-- /.reason-block -->
  <div class="reason-block">
    <div class="icon- reason-block__img"></div>
    <div class="reason-block__text">
      <h3 class="reason-block__title">Целевая аудитория
      </h3>
      <!-- /.reason-block__title -->
      <p class="reason-block__descript">
        Таргетированая реклама поможет найти вам своего клиента, вернее — он сам придет к вам!</p>
      <!-- /.reason-block__descript -->
    </div>
  </div>
  <!-- /.reason-block -->



  <div class="reason-block">
    <div class="icon- reason-block__img"></div>
    <div class="reason-block__text">
      <h3 class="reason-block__title">Фора в конкурентной борьбе</h3>
      <!-- /.reason-block__title -->
      <p class="reason-block__descript">
        3 из 4 клиентов ищут информацию об услуге или товаре в Сети, прежде чем решиться на покупку. Дайте им возможность найти ВАС, а не ваших конкурентов</p>
      <!-- /.reason-block__descript -->
    </div>
  </div>
  <!-- /.reason-block -->
  <div class="reason-block">
    <div class="icon- reason-block__img"></div>
    <div class="reason-block__text">
      <h3 class="reason-block__title">Аналитика
      </h3>
      <!-- /.reason-block__title -->
      <p class="reason-block__descript">
        Благодаря системам аналитики вы можете узнать все: куда и когда кликал клиент, какие статьи он читал до конца и т.д. Количество данных несравнимо больше, чем дают соцсети. Согласитесь, важно знать чего хочет клиент</p>
      <!-- /.reason-block__descript -->
    </div>
  </div>
  <!-- /.reason-block -->
  <div class="reason-block">
    <div class="icon- reason-block__img"></div>
    <div class="reason-block__text">
      <h3 class="reason-block__title">Экономия времени
      </h3>
      <!-- /.reason-block__title -->
      <p class="reason-block__descript">
        На сайте вы можете разместить ответы на самые популярные вопросы клиентов. Не тратьте время на однотипные отклики
      </p>
    </div>
    <!-- /.reason-block__descript -->
  </div>
  <!-- /.reason-block -->
</div>

БЛОГ НА HUSL

Как заставить элементы двух столбиков в FLEX контейнере "растечься" по высоте бОльшего столбика?

Ответы (0 шт):