Мы добавили ширину и отступы колонкам в подвале. Осталось выровнять содержимое второй колонки по вертикали. Как видно из макета, оно должно быть прижато к самому низу страницы:

По умолчанию все флекс-элементы имеют одинаковую высоту, подстраиваясь под самый высокий элемент в ряду. Благодаря подсветке боксов это особенно заметно:

unknown@raccoon.ru
+7 999 999-99-99

© Неопознанный Енот

Самый простой способ выровнять отдельный элемент по нижней границе — добавить ему автоматический внешний отступ сверху. В этом случае флекс-элемент уменьшит свою высоту под содержимое и прижмётся к низу родительского контейнера.

Обратите внимание, в блочном боксе автоматические внешние отступы сверху и снизу работают так же, как если бы их сделали равными 0. Но во флекс-контейнере они позволяют сдвинуть флекс-элемент к верхней или нижней границе. Или даже отцентровать элемент по вертикали, если задать верхний и нижний отступ одновременно.

Нам нужно прижать содержимое второй колонки к нижнему краю, поэтому добавим ей автоматический внешний отступ сверху.

После этого уберём подсветку боксов, так как она больше не нужна.

Для создания колонок на этой странице мы использовали флексы. Но пока мы затронули лишь часть их возможностей. Подробнее о вёрстке с помощью флексов рассказано в частях «Флексбокс. Знакомство» и «Флексбокс. Погружение».

В этой части мы научились управлять крупными сеточными элементами. В следующий раз займёмся мелкими.