Как выровнять высоту и центрировать по вертикали элементы во FLEX‑контейнере

Как только не извращались раньше верстальщики для выравнивания высоты элементов. Некоторые применяли для этого даже JavaScript. Но потом появились флексбоксы, которые сильно упростили жизнь верстальщиков. Но и по флексам все же иногда возникают вопросы.

Итак, первое, что приходит в голову для решения задачи: использовать для FLEX‑контейнера align-items: center. И это правильно, но тогда высота вложенных элементов будет разной.

See the Pen Выровнять высоту и центрировать по вертикали элементы во FLEX‑контейнере — 1 by Ivan (@DanilinBiz) on CodePen.

А нам нужна единая растягивающаяся высота: align-items: stretch.
Естественно, align-items не может быть одновременно center и stretch.
Как быть?

Решение простое: делаем вложенные элементы резиновыми и тоже флексбоксами, а внутри них уже все центрируем по вертикали.

Должно получиться примерно так:

See the Pen Выровнять высоту и центрировать по вертикали элементы во FLEX‑контейнере — 2 by Ivan (@DanilinBiz) on CodePen.

Задача решена.

Спасибо