Как выровнять высоту и центрировать по вертикали элементы во 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.

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