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

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

CSS

При вёрстке карточек товаров или превью статей контент разной длины ломает сетку, когда несколько элементов стоят в одну строку. Раньше CSS не мог связать соседние элементы для выравнивания высоты. Спецификация Flexbox решила эту задачу.

Применив display: flex к родительскому контейнеру, дочерние элементы становятся связанными и могут иметь одинаковые размеры.

Пример 1 — базовая структура

HTML:


  ...
  ...
  ...

CSS:

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

Пример 2 — с вложенным блоком

Если внутри элемента есть вложенный блок, которому нужно заполнить всю высоту, добавьте height: 100%:


  ...
  ...
  ...

.inner {
  height: 100%;
}