Flexbox — основы

Flexbox — одномерная (1D) раскладка: элементы выстраиваются в строку или колонку. display: flex создаёт flex-контейнер. flex-direction задаёт ось (row/column). flex-wrap разрешает перенос. gap задаёт расстояние между элементами. Flexbox — замена float для раскладки.

Flexbox — раскладка в ОДНОМ измерении (строка ИЛИ колонка, не обе сразу).

display: flex — создаёт flex-контейнер:

• Все прямые дети становятся flex- items
• Элементы выстраиваются вдоль главной оси (main axis)

flex-direction:

• row (по умолчанию) — слева направо
• row-reverse — справа налево
• column — сверху вниз
• column-reverse — снизу вверх

flex-wrap:

• nowrap (по умолчанию) — всё в одну строку
• wrap — перенос на новую строку
• wrap-reverse — перенос вверх

gap:

• Задаёт расстояние между элементами
• gap: 1rem; — одинаковый отступ
• gap: 1rem 2rem; — вертикаль/горизонталь
• Заменяет margin для расстояния между flex-items

Flex-контейнер vs Flex-item:

• Контейнер: display: flex, flex-direction, flex-wrap
• Items: flex-grow, flex-shrink, flex-basis, flex, align-self

Flexbox — как конвейер на заводе. flex-direction — направление конвейера (горизонтально/вертикально). flex-wrap — можно ли класть вещи на второй ряд. gap — расстояние между коробками на конвейере.

**Самый простой:**

.container {
  display: flex;
  gap: 1rem;
}

.item {
  flex: 1; /* Равномерно делят пространство */
}

Минимальный flex: контейнер + gap + flex: 1.

**Простой:**

/* Горизонтальное меню */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Карточки */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* grow shrink basis */
}

/* Колонки */
.layout {
  display: flex;
  gap: 2rem;
}

.sidebar { flex: 0 0 250px; }
.main    { flex: 1; }

/* Центрирование */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Практические flex-паттерны: меню, карточки, layout, центрирование.

**Реальный пример:**

/* Полноценный layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.content {
  display: flex;
  flex: 1;
  gap: 2rem;
  padding: 2rem;
}

.sidebar {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

Полный flex-layout: header, sidebar, main, footer.

**Неправильно:** Использовать flexbox для двумерной раскладки

**Почему:** Flexbox — ОДНОМЕРНЫЙ (1D): строка ИЛИ колонка. Для двух осей — CSS Grid.

**Правильно:** 1D (строка/колонка) → Flexbox. 2D (строки + колонки) → Grid.

**Неправильно:** Не использовать gap

**Почему:** Margin для расстояния между flex-items создаёт проблемы с отступами у крайних элементов.

**Правильно:** gap — безопасная альтернатива margin для flex/grid.

**Неправильно:** Забывать flex-wrap

**Почему:** Без wrap элементы сжимаются до min-content, что ломает макет.

**Правильно:** Для адаптивных сеток: flex-wrap: wrap + flex-basis.

• Flexbox — ОДНОМЕРНАЯ раскладка (1D)
• flex-direction: row | column — направление оси
• gap — расстояние между элементами (лучше margin)
• flex-wrap: wrap — перенос на новые строки
• display: flex на контейнере, align-items/justify-content — центрирование

Назад: Вы знаете позиционирование (C12) — flexbox даёт современную раскладку без float.

Вперёд: В следующем уроке (C14) вы изучите выравнивание во flex: justify-content, align-items, align-self.

• MDN: основы Flexbox
• Дока: гайд по flexbox