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%;
 }