Урок 22. Обзор урока: Введение во Flexbox

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

⚡ Кратко

display: flex на родителе превращает его во flex-контейнер, а прямых детей — во flex-элементы. Это инструмент одномерной раскладки: строка или колонка, с управлением выравниванием по главной и поперечной осям.

О чём урок

Flexbox — это режим одномерной раскладки. Стоит написать display: flex на родителе, как он становится flex-контейнером, а его прямые дети — flex-элементами, выстроенными в строку или колонку. Урок знакомит с делением на контейнер/элементы, с главной и поперечной осями и базовым выравниванием (justify-content, align-items).

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

  • display: flex — включает flex-раскладку
  • flex-контейнер — родитель с display: flex
  • flex-элементы — прямые дети контейнера
  • flex-direction — направление главной оси (row / column)
  • главная ось / поперечная ось (main / cross)
  • justify-content — выравнивание вдоль главной оси
  • align-items — выравнивание вдоль поперечной оси
  • gap — промежутки между элементами

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

Теория

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

Справочник

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

Примеры

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

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

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

Задания

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

Решения

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

Ошибки

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

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

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

Ресурсы

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

Навигация