Урок 22. Домашнее задание: Введение во Flexbox

📁 Раздел: Flexbox ⏱️ Время изучения: ~55 мин 🎯 Сложность: Средняя
#display #flex-direction #justify-content #align-items #flex-wrap #gap #align-self

⚡ Кратко

Соберите ряд карточек на Flexbox: display: flex + flex-wrap: wrap + gap. Карточки переносятся на новую строку и держат ровные промежутки.

Домашнее задание

Задача: Соберите список карточек курсов на Flexbox: контейнер переносит карточки на новую строку, а расстояние задаётся через gap.

Ожидаемый результат

HTML

Основы разметки

CSS

Стили и вёрстка

Flexbox

Раскладка

.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.cards > * { flex: 0 1 16rem; }
1

Разметка

Создайте контейнер .cards и несколько однотипных дочерних <article> (карточек курса).

2

Flexbox

Добавьте display: flex, flex-wrap: wrap и gap. Проверьте, где проходят main axis и cross axis.

3

Проверка

Измените ширину окна и убедитесь, что карточки переносятся, а layout остаётся читаемым.

📄 lesson-22/homework.css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cards > * {
  flex: 0 1 16rem;
}
Связь с уроком: структуру осей и свойства смотрите в теории, готовые приёмы — в примерах.

Навигация