Урок 23. Обзор урока: Главная и поперечная оси

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

⚡ Кратко

У flex-контейнера две оси: главная (вдоль неё идут элементы, ею управляет justify-content) и поперечная (ею управляет align-items). flex-direction задаёт направление главной оси, flex-wrap разрешает перенос.

О чём урок

Главное в Flexbox — понимать две оси. Главная ось (main) — направление, вдоль которого выкладываются элементы; её задаёт flex-direction. Поперечная ось (cross) — перпендикулярная ей. justify-content выравнивает вдоль главной оси, align-items — поперёк. При flex-direction: column оси меняются местами — это ключевая идея урока.

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

  • main axis — главная ось
  • cross axis — поперечная ось
  • flex-direction — направление главной оси (row / column)
  • justify-content — выравнивание вдоль главной оси
  • align-items — выравнивание поперёк (по cross-оси)
  • flex-wrap — перенос на новые линии

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

Теория

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

Справочник

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

Примеры

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

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

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

Задания

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

Решения

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

Ошибки

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

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

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

Ресурсы

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

Навигация