Какой лучший способ реализовать этот макет с помощью flexbox?

Question

Я пытаюсь использовать flexbox для реализации макета:

Я знаю, что могу установить стиль контейнера:

align-items: center;
justify-content: center;

чтобы выровнять верхнюю рамку, но как насчет нижней?

Answer 1

Вы можете присвоить padding-bottom: 20px родительскому элементу.

И применить этот класс к нижнему элементу.

.flex-item {
  align-self: flex-end;
}