Основы Flexbox

Flexbox (Flexible Box Layout) — одномерная система раскладки CSS, которая распределяет пространство между элементами вдоль одной оси. Это основной инструмент для компонентной раскладки в современном CSS.

Зачем нужно

До Flexbox для центрирования, выравнивания и распределения пространства использовались хаки с float, table-cell, inline-block. Flexbox решает эти задачи одной строкой. Навбары, карточки, формы, хедеры, футеры — всё это Flexbox.

Где используется

  • Навигационные меню
  • Карточные раскладки
  • Центрирование элементов
  • Распределение пространства между элементами
  • Управление порядком элементов
  • Адаптивные компоненты

Предпосылки

Flex-контейнер и flex-элементы

/* Контейнер */
.container {
  display: flex; /* или inline-flex */
}

/* Все прямые потомки становятся flex-элементами */

<div class="container">        <!-- flex-контейнер -->
  <div class="item">A</div>    <!-- flex-элемент -->
  <div class="item">B</div>    <!-- flex-элемент -->
  <div class="item">C</div>    <!-- flex-элемент -->
</div>

Только прямые потомки контейнера становятся flex-элементами. Вложенные элементы — нет.

Оси Flexbox

Главная ось (Main Axis)

Направление, в котором размещаются элементы. По умолчанию — горизонтально (слева направо).

Поперечная ось (Cross Axis)

Перпендикулярна главной. По умолчанию — вертикально (сверху вниз).

flex-direction: row (по умолчанию)

     Main Axis →
  ┌──────────────────────────┐
  │  ┌───┐  ┌───┐  ┌───┐   │  ↑
  │  │ A │  │ B │  │ C │   │  │ Cross
  │  └───┘  └───┘  └───┘   │  │ Axis
  └──────────────────────────┘  ↓

flex-direction: column

     Cross Axis →
  ┌──────────┐
  │  ┌────┐  │  ↑
  │  │ A  │  │  │
  │  └────┘  │  │
  │  ┌────┐  │  │ Main
  │  │ B  │  │  │ Axis
  │  └────┘  │  │
  │  ┌────┐  │  │
  │  │ C  │  │  ↓
  │  └────┘  │
  └──────────┘

display: flex vs display: inline-flex

/* Блочный flex-контейнер — занимает всю ширину */
.block-flex {
  display: flex;
}

/* Строчный flex-контейнер — ширина по контенту */
.inline-flex {
  display: inline-flex;
}

Что происходит при display: flex

Когда элемент становится flex-контейнером:

  1. Прямые потомки становятся flex-элементами
  2. Элементы выстраиваются в строку (flex-direction: row)
  3. Элементы не переносятся на новую строку (flex-wrap: nowrap)
  4. Элементы растягиваются по поперечной оси (align-items: stretch)
  5. Элементы не растут по главной оси (flex-grow: 0)
  6. Элементы могут сжиматься (flex-shrink: 1)
/* Значения по умолчанию */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  order: 0;
  align-self: auto;
}

Влияние направления письма

Flexbox учитывает direction и writing-mode:

/* LTR (по умолчанию): A → B → C */
.ltr { direction: ltr; }

/* RTL: C ← B ← A */
.rtl { direction: rtl; }

/* Вертикальный текст: оси меняются */
.vertical { writing-mode: vertical-rl; }

Быстрые решения с Flexbox

Центрирование

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Элемент вправо

.nav {
  display: flex;
}
.nav .logo { /* Слева */ }
.nav .spacer { flex: 1; } /* Или margin-left: auto на .actions */
.nav .actions { /* Справа */ }

Равные колонки

.columns {
  display: flex;
  gap: 16px;
}
.columns > * {
  flex: 1; /* Равная ширина */
}

Частые ошибки

  1. Flex-элементы работают только на прямых потомках — вложенные <span> внутри <div> не являются flex-элементами

  2. Забыт display: flex на контейнере — justify-content и align-items не работают без него

  3. Путаница осей — justify-content работает по главной оси, align-items по поперечной. При flex-direction: column оси меняются

  4. inline-flex неожиданно — контейнер занимает ширину по контенту, а не 100%

Практика

  • Создать flex-контейнер с тремя элементами
  • Центрировать элемент по обеим осям одной строкой
  • Переключить flex-direction с row на column и наблюдать смену осей
  • Попробовать display: inline-flex и сравнить с display: flex

Связанные темы

Ресурсы