Урок 25. Обзор урока: Практические шаблоны Flexbox

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

⚡ Кратко

Пять готовых flexbox-рецептов: навбар (space-between), сетка карточек (wrap + gap), идеальное центрирование, медиа-объект и sticky-footer. Мини-проект собирает их в одну страницу каталога.

О чём урок

Это практический урок: Flexbox превращается в набор готовых «рецептов» раскладки, которые встречаются на каждом сайте. Мы разберём пять паттернов — навбар, адаптивную сетку карточек, идеальное центрирование, медиа-объект и sticky-footer — и соберём из них мини-проект (страницу каталога).

Prerequisites: урок 24 (выравнивание и gap), базовая блочная модель и display.

Ключевые понятия

  • Навбар — justify-content: space-between + align-items: center
  • Сетка карточек — flex-wrap: wrap + gap + flex-basis
  • Центрирование — justify-content: center + align-items: center
  • Медиа-объект — аватар flex: 0 0 …, текст flex: 1
  • Sticky-footer — колонка + min-height: 100vh + flex: 1 у main

Структура урока

Теория

Главная идея и модель Flexbox.

Справочник

Свойства и значения урока.

Примеры

Рабочие HTML/CSS-фрагменты.

Старый vs Новый

Чем Flexbox лучше старых приёмов.

Задания

Практика для самостоятельной работы.

Решения

Проверочные ответы.

Ошибки

Частые проблемы и диагностика.

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

Практическая работа.

Ресурсы

Документация и повторение.

Навигация