CSS Flexbox: полное руководство с примерами

CSS Flexbox (Flexible Box Layout) — это модуль макетирования, который позволяет создавать гибкие одномерные раскладки. Flexbox решает множество задач выравнивания и распределения пространства между элементами без использования float и позиционирования. В этой статье рассмотрим все свойства Flexbox с практическими примерами.

Основы Flexbox

Flexbox работает по принципу двух осей: главной (main axis) и поперечной (cross axis). Направление главной оси определяется свойством flex-direction. Элементы располагаются вдоль главной оси и выравниваются по поперечной.

Создание flex-контейнера

Чтобы включить Flexbox, достаточно установить display: flex или display: inline-flex на родительском элементе:

.container {
  display: flex;
}

Все прямые потомки становятся flex-элементами и получают особое поведение по умолчанию: они выстраиваются в ряд, сжимаются до минимального размера и не переносятся.

Свойства flex-контейнера

flex-direction

Определяет направление главной оси и порядок элементов:

Значение	Описание
row	По умолчанию. Слева направо (в LTR)
row-reverse	Справа налево
column	Сверху вниз
column-reverse	Снизу вверх

.container {
  display: flex;
  flex-direction: row; /* элементы в ряд */
}

.container-column {
  display: flex;
  flex-direction: column; /* элементы в колонку */
}

flex-wrap

Управляет переносом элементов при нехватке места:

Значение	Описание
nowrap	По умолчанию. Без переноса
wrap	Перенос на следующую строку
wrap-reverse	Перенос в обратном направлении

.container {
  display: flex;
  flex-wrap: wrap;
}

flex-flow

Краткая запись для flex-direction и flex-wrap:

.container {
  flex-flow: row wrap;
}

justify-content

Выравнивание элементов вдоль главной оси:

Значение	Описание
flex-start	К началу оси
flex-end	К концу оси
center	По центру
space-between	Равномерно, первый у начала, последний у конца
space-around	Равные отступы вокруг каждого
space-evenly	Равные отступы между всеми

.container {
  display: flex;
  justify-content: space-between;
}

align-items

Выравнивание элементов вдоль поперечной оси (в одной строке):

Значение	Описание
stretch	По умолчанию. Растягивание на всю высоту
flex-start	К началу поперечной оси
flex-end	К концу
center	По центру
baseline	По базовой линии текста

.container {
  display: flex;
  align-items: center;
}

align-content

Выравнивание строк flex-контейнера при flex-wrap: wrap. Игнорируется при одной строке:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Свойства flex-элементов

flex-grow

Коэффициент роста элемента при наличии свободного места. По умолчанию 0 (не растёт):

.item {
  flex-grow: 1; /* займёт всё свободное место */
}

.item-double {
  flex-grow: 2; /* займёт в два раза больше, чем элемент с flex-grow: 1 */
}

flex-shrink

Коэффициент сжатия при нехватке места. По умолчанию 1:

.item {
  flex-shrink: 0; /* не сжимается */
}

flex-basis

Начальный размер элемента до распределения пространства. Может быть в px, %, em или auto:

.item {
  flex-basis: 200px;
}

flex

Краткая запись: flex-grow flex-shrink flex-basis. Значение по умолчанию: 0 1 auto:

.item {
  flex: 1 1 auto; /* растёт и сжимается, базовый размер auto */
}

.item-fixed {
  flex: 0 0 200px; /* фиксированная ширина 200px */
}

align-self

Переопределение align-items для отдельного элемента:

.item {
  align-self: flex-end;
}

order

Визуальный порядок элементов. По умолчанию 0. Отрицательные значения выводят элемент раньше:

.item-first {
  order: -1;
}

.item-last {
  order: 1;
}

Практические примеры

Карточки в ряд с равной шириной

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

.card {
  flex: 1 1 0;
  min-width: 0;
}

Навигационное меню

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

.nav-links {
  display: flex;
  gap: 2rem;
}

Сайдбар + контент

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1 1 auto;
}

Центрирование по вертикали и горизонтали

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Типичные ошибки

1. Забытый min-width: 0 — flex-элементы по умолчанию имеют min-width: auto, что мешает сжатию. Для текстового контента добавьте min-width: 0.

2. Смешение flex и width — при flex: 1 1 auto явный width может конфликтовать. Используйте flex-basis вместо width.

3. gap и старые браузеры — свойство gap для Flexbox поддерживается не во всех браузерах. Для совместимости используйте margin на элементах.

Инструменты для экспериментов

Для быстрой проверки и отладки Flexbox-раскладок удобно использовать Flexbox Playground на rechecker.ru — интерактивную песочницу, где можно менять свойства и сразу видеть результат.

При необходимости конвертировать готовые Flexbox-стили в классы Tailwind используйте CSS в Tailwind.

Адаптивное поведение

Flexbox хорошо сочетается с медиа-запросами для создания адаптивных макетов:

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

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 1 1 calc(50% - 1rem);
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

Специфика inline-flex

display: inline-flex создаёт flex-контейнер, который ведёт себя как строчный элемент. Полезно, когда нужно встроить flex-раскладку в текст или ограничить ширину контейнера его содержимым:

.badge-group {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

Производительность

Flexbox обрабатывается браузером эффективно. Основные рекомендации:

• Избегайте глубокой вложенности flex-контейнеров (более 3-4 уровней)
• Используйте will-change: flex только при анимации flex-свойств и только на анимируемых элементах
• Для статичных раскладок предпочитайте flex: 0 0 auto вместо flex: 1 1 auto, если рост не нужен

Поддержка браузеров

Flexbox поддерживается во всех современных браузерах. Для IE10 и IE11 требуются префиксы -ms-:

.container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

Автопрефиксер и PostCSS автоматически добавляют необходимые префиксы при сборке проекта.

Сравнение с CSS Grid

Flexbox оптимален для одномерных раскладок (ряд или колонка). Для двумерных сеток лучше подходит CSS Grid. Подробное сравнение технологий и рекомендации по выбору — в статье Flexbox vs CSS Grid: когда что использовать.

Дополнительные паттерны центрирования с Flexbox описаны в материале Центрирование в CSS с Flexbox: все способы.