CSS: Как сделать блоки одинаковыми по высоте Flexbox


Очень часто делая раскладку материалов на сайте можно столкнуться с весьма неприятной ситуацией, когда например у товаров а магазине или у записей в блоге могут прилично разниться длина заголовков, описания итд. Всё это ломает сетку в случае если у вас более одного элемента в строке.

CSS к сожалению ранее не умел связывать соседние элементы в строке для приведения их высоты к общему знаменателю. К счастью с внедрением спецификации FlexBox всё радикально изменилось, теперь задавая родительскому элементу display:flexbox вы получаете массив элементов внутри тесно взаимосвязанный между собой.

Рассмотрим ситуацию, предположем у нас есть некий блок в котором мы выводим по три записи на строку:

<div class="wrapper">
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
</div>

Что бы в независимости от длины содержимого все блоки стали одинаковой высоты в каждой из строк, делаем вот такой трюк:

  .wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

И на последок если вы используете внутри .item внутренний враппер/.inner (обёртку) и хотите его тоже прибить к низу item вам просто необходимо задать этому элементу высоту 100% и он заполнит родительский блок. Пример

<div class="wrapper">
   <div class="item"><div class="inner">...</div></div>
   <div class="item"><div class="inner">...</div></div>
   <div class="item"><div class="inner">...</div></div>
</div>

Добавляем высоту иннеру:

.wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .inner {
    height:100%;
  }