Урок 25. Задания: Практические шаблоны Flexbox

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

⚡ Кратко

Собери каждый из пяти рецептов своими руками. К каждому заданию — описание ожидаемого результата. Проверяй в браузере и в DevTools (flex-overlay).

Задания

Задание 1. Навбар

Сверстай шапку: слева логотип «Shop», справа три ссылки.

  • Контейнеру — display: flex и justify-content: space-between.
  • Выровняй содержимое по вертикали через align-items: center.

Ожидаемый результат: логотип прижат к левому краю, ссылки — к правому, всё на одной линии.

Задание 2. Идеальное центрирование

В блоке высотой 200px размести кнопку ровно по центру по обеим осям.

Ожидаемый результат: кнопка точно в центре и по горизонтали, и по вертикали.

Задание 3. Сетка карточек

Сделай 6 карточек, которые стоят в ряд и переносятся на новую строку при сужении окна.

  • Контейнер: display: flex; flex-wrap: wrap; gap: 1rem.
  • Карточки: flex: 1 1 200px.

Ожидаемый результат: на широком экране 3 карточки в ряд, на узком — 1–2, без горизонтальной прокрутки.

Задание 4. Медиа-объект

Собери карточку комментария: круглый аватар 56px слева, имя и текст справа.

Ожидаемый результат: аватар не сжимается, текст занимает весь остаток ширины (flex: 1).

Задание 5. Sticky-footer (мини-проект)

Собери страницу из шапки, main и подвала так, чтобы подвал всегда был внизу, даже если контента мало.

  • Обёртка страницы: min-height: 100vh; display: flex; flex-direction: column.
  • main: flex: 1.

Ожидаемый результат: при пустом main подвал прижат к низу окна, а не висит посередине.

Самопроверка

  1. Открой DevTools и покажи на своём примере, где главная (main) и поперечная (cross) оси.
  2. Назови, какие свойства из заданий стоят на flex-контейнере, а какое — на flex-элементе.

Навигация