Урок 24. Обзор урока: Выравнивание: justify-content, align-items, gap

📁 Раздел: Flexbox ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#align-items #align-content #gap #row-gap #align-self #flex-grow #flex-shrink #flex-basis

⚡ Кратко

Поперечное выравнивание (align-items, align-self, align-content), промежутки gap и распределение свободного места (flex-grow/shrink/basis, flex: 1).

О чём урок

Урок 23 закрыл выравнивание вдоль главной оси (justify-content). Здесь — вторая половина Flexbox: выравнивание по поперечной оси (align-items, align-self, align-content), удобные промежутки gap и управление тем, как элементы делят свободное место (flex-grow, flex-shrink, flex-basis, шорткат flex: 1).

Что потребуется заранее: уроки 22–23 (display: flex, главная и поперечная оси, justify-content), блочная модель и DevTools.

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

  • justify-content
  • align-items
  • align-self
  • align-content
  • gap
  • row-gap
  • column-gap

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

Теория

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

Справочник

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

Примеры

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

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

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

Задания

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

Решения

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

Ошибки

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

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

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

Ресурсы

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

Навигация