Flexbox: одномерная система компоновки — flex-direction, justify-content, align-items

Что такое Flexbox? 🔥

Flexbox — это суперспособность CSS, которая превращает хаотичное расположение элементов в предсказуемый порядок. Представьте, что контейнер — это дирижёр, а элементы внутри него — оркестр. Дирижёр (flex-контейнер) управляет музыкантами (flex-элементами), указывая, как им выстраиваться, распределяться и растягиваться на сцене (в вёрстке).

Flex-direction: куда смотрят элементы? ↔️

flex-direction определяет направление главной оси (как музыканты выстраиваются в ряд — слева направо, сверху вниз или наоборот).

.container {
  display: flex;
  flex-direction: row; /* Значение по умолчанию (слева направо) */
}

🔹 Доступные значения:

• row (по умолчанию) — слева направо, как текст.
• row-reverse — справа налево (зеркально).
• column — сверху вниз, как обычный блок.
• column-reverse — снизу вверх (редко, но может пригодиться для инвертированных списков).

💡 Совет: row-reverse меняет порядок элементов визуально, но не в DOM! Для скринридеров они остаются в исходном порядке.

Justify-content: выравнивание по главной оси 🎯

justify-content — это дирижёрская палочка, которая расставляет элементы вдоль главной оси (по умолчанию — горизонтальной).

.container {
  display: flex;
  justify-content: center; /* Центрируем элементы */
}

🔹 Ключевые значения:

• flex-start (по умолчанию) — к началу оси (слева для row).
• flex-end — к концу оси (справа для row).
• center — в центр (чаще всего используется для навигации).
• space-between — равные промежутки между элементами.
• space-around — равные промежутки вокруг (включая края).
• space-evenly — всё равномерно, даже отступы по краям.

Пример для меню:

.nav {
  display: flex;
  justify-content: space-between; /* Лого слева, кнопки справа */
}

Align-items: выравнивание по поперечной оси 📏

Если justify-content работает по главной оси, то align-items управляет выравниванием по поперечной (перпендикулярной).

.container {
  display: flex;
  align-items: center; /* Элементы по центру вертикально */
}

🔹 Основные значения:

• stretch (по умолчанию) — растягивает элементы на всю высоту/ширину контейнера.
• flex-start — прижимает к началу оси (верх для row).
• flex-end — к концу оси (низ для row).
• center — золотая середина (идеально для вертикального центрирования).
• baseline — выравнивание по базовой линии текста (полезно для форм с разным размером шрифта).

Пример для отцентрированной кнопки:

.card {
  display: flex;
  align-items: center; /* Текст и кнопка на одной высоте */
}

Гибрид: центрирование по двум осям ✨

Комбинация justify-content и align-items творит чудеса! Например, абсолютное центрирование без position: absolute:

.modal {
  display: flex;
  justify-content: center; /* По горизонтали */
  align-items: center;     /* По вертикали */
  height: 100vh;           /* На всю высоту экрана */
}

🚀 Профессионалы так делают — это чище, чем margin: auto или трансформации.

Практика: делаем навигацию 🛠️

Задача: Создать шапку сайта с лого слева и меню справа, где пункты центрированы по вертикали.

.header {
  display: flex;
  justify-content: space-between; /* Лого и меню по краям */
  align-items: center;            /* Центр по вертикали */
  padding: 20px;                  /* Отступы для красоты */
  background: #f8f9fa;            /* Светлый фон */
}

.logo {
  font-weight: bold;
}

.nav {
  display: flex;
  gap: 15px;                      /* Промежутки между пунктами */
}

Итоги: Flexbox за 30 секунд ⏱️

1. Контейнеру — display: flex.
2. Направление — flex-direction (ряд или столбец).
3. По главной оси — justify-content (распределение).
4. По поперечной — align-items (выравнивание).

🔥 Фишка от Данилы Бежина: Если flex-элементы не слушаются, проверь размеры контейнера! У него должна быть явная ширина или высота, иначе некуда «выравниваться». Подробнее — в его видео.