• Теория
  • Теория

Выравниваем элемент по вертикали

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

Макет подвала

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

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

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

Схема выравнивания по вертикали

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

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

Для выравнивания отдельного флекс-элемента поперёк главной оси можно также использовать свойство align-self.

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

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

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует через 7 дней. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Сетки» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.