.card { display: flex; flex-direction: column; }Заголовок, текст и действие образуют вертикальный стек.
УРОК 52 ИЗ 100
Смените ось на колонку
Расположите содержимое карточки сверху вниз.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
flex-direction задаёт направление главной оси. Значение column начинает с block-start и располагает элементы вертикально, не меняя семантический порядок HTML.
.card { display: flex; flex-direction: row; }row оставляет главную ось в строчном направлении и не создаёт нужную колонку.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Включите Flexbox и задайте карточке направление column.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Карточка является flex-контейнером.
- ○Главная ось использует column.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
display: flex создаёт контейнер, а flex-direction: column переносит главную ось по вертикали.