Колонки
Дальше — hero-блок. Заголовок, текст и ссылка стоят одно под другим, но заголовок и текст прижаты друг к другу. Сделаем hero-блок flex-контейнером с колонкой: тогда мы сможем разнести элементы с помощью gap, а позже в этом уроке — отцентрировать их.
Направление главной оси (свойство flex-direction) задают такие классы:
| Класс | CSS | Направление |
|---|---|---|
flex-row | flex-direction: row; | ряд слева направо (по умолчанию) |
flex-col | flex-direction: column; | колонка сверху вниз |
flex-row-reverse | flex-direction: row-reverse; | ряд справа налево |
flex-col-reverse | flex-direction: column-reverse; | колонка снизу вверх |
Осторожно: flex-col лишь говорит, в какую сторону идут элементы. Контейнеру нужен ещё и класс flex; без него это вообще не flex-контейнер.
Как вы знаете из курса CSS, оси поворачиваются вместе с направлением. В колонке главная ось идёт сверху вниз, а поперечная — слева направо. Поэтому в колонке justify-* двигает элементы вверх и вниз, а items-* — влево и вправо.
Задание
- 1
Добавьте hero-блоку (элементу
sectionс оранжевым фоном) классыflex flex-col. Элементы стоят одно под другим, как и раньше, но посмотрите на ссылку: теперь она шириной во весь hero-блок. В колонке поперечная ось идёт слева направо, и flex-элементы растягиваются вдоль неё (items-stretchдействует по умолчанию). Как flex-элемент, ссылка выкладывается как блок, поэтому еёinline-blockбольше ничего не значит. - 2
Добавьте класс
gap-4. Заголовок, текст и ссылка раздвинутся на 16 px. - 3
Добавьте класс
items-start. Элементы больше не растянуты: каждый занимает ровно столько ширины, сколько нужно его содержимому, и стоит в начале поперечной оси, то есть слева.