Теория — Урок 22

Главная идея

Flexbox («гибкий контейнер») — это режим раскладки для одномерных задач: расставить элементы в одну строку или одну колонку, управлять промежутками между ними и выравниванием. Достаточно написать display: flex на родителе — и он становится flex-контейнером, а все его прямые дети — flex-элементами, которые сразу выстраиваются в ряд без всяких float и inline-block.

Представь полку-рейку, на которую раскладывают предметы. Контейнер — это сама рейка, а flex-элементы — предметы на ней. Ты можешь прижать все предметы к левому краю, к правому, собрать в центр или равномерно расставить с одинаковыми промежутками. А ещё — выровнять их по высоте: прижать к верхней планке, к нижней или по центру. Flexbox — это и есть такая «умная рейка»: ты говоришь, как разложить предметы, а не двигаешь каждый вручную.

Контейнер и элементы: кто за что отвечает

Главное правило Flexbox: одни свойства пишутся на контейнере (родителе), другие — на элементах (детях). Их нельзя путать местами.

Свойства контейнера: display: flex, flex-direction, flex-wrap, justify-content, align-items, gap.
Свойства элементов: flex-grow, flex-shrink, flex-basis (и краткая запись flex), align-self.

Например, justify-content: center на дочернем блоке просто не сработает — это свойство контейнера. Если правило «не действует», первым делом проверь, на ком оно написано.

Две оси: главная и поперечная

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

При flex-direction: row: главная ось — горизонтальная (вдоль неё работает justify-content), поперечная — вертикальная (вдоль неё работает align-items).

Как это работает на живом контейнере

Ниже — настоящий flex-контейнер (.layout-demo). Достаточно сменить flex-direction, чтобы элементы выстроились в строку или в колонку:

flex-direction: row — в строку (по умолчанию)

flex-direction: column — в колонку

Когда применять

Flexbox — для одномерных раскладок: панель навигации, ряд кнопок, шапка с логотипом и меню, центрирование блока по обеим осям, карточки в ряд. Если нужна полноценная двумерная сетка (строки И колонки одновременно) — это задача для CSS Grid (следующие уроки).

Базовый синтаксис

📄 lesson-22/main.css

.cards {
  display: flex;          /* родитель → flex-контейнер */
  flex-direction: row;    /* главная ось — горизонталь */
  justify-content: center;/* вдоль главной оси */
  align-items: center;    /* вдоль поперечной оси */
  gap: 1rem;              /* промежутки между элементами */
}

Частая ошибка: при flex-direction: column главная и поперечная оси меняются местами. Теперь justify-content управляет выравниванием по вертикали, а align-items — по горизонтали.

Проверка: откройте DevTools, выделите flex-контейнер и включите Flexbox overlay — браузер подсветит оси и промежутки.

Урок 22. Теория: Введение во Flexbox