📐Flexbox

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

Зачем нужен Flexbox

До появления Flexbox верстальщики использовали float, inline-block и position для создания раскладок. Это работало, но требовало костылей. Центрирование элемента по вертикали превращалось в квест с отрицательными margin.

Flexbox решил эти проблемы. Он появился в спецификации CSS3 в 2009 году. В 2012 стал стандартом W3C. С 2015 года поддерживается всеми современными браузерами. В России активно используется с 2016 года — Яндекс, Mail.ru, Сбербанк перешли на Flexbox для новых проектов.

Главное преимущество — работа в одном измерении. Flexbox управляет раскладкой либо по горизонтали (строка), либо по вертикали (колонка). Для двумерных сеток есть CSS Grid.

Основные свойства контейнера

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

flex-direction задаёт направление главной оси. Значения: row (горизонтально, по умолчанию), row-reverse (справа налево), column (вертикально), column-reverse (снизу вверх). Главная ось определяет, как будут выстраиваться элементы.

justify-content выравнивает элементы по главной оси. Варианты: flex-start (прижать к началу), flex-end (к концу), center (по центру), space-between (равные промежутки между элементами), space-around (равные отступы вокруг каждого элемента), space-evenly (все промежутки одинаковые).

align-items выравнивает по поперечной оси. Если flex-direction: row, то это вертикальное выравнивание. Значения: stretch (растянуть на всю высоту, по умолчанию), flex-start, flex-end, center, baseline (по базовой линии текста).

flex-wrap определяет, переносятся ли элементы на новую строку. По умолчанию nowrap — все элементы в одной линии, даже если не влезают. wrap — переносит на следующую строку. wrap-reverse — переносит, но строки идут снизу вверх.

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

У отдельных элементов внутри flex-контейнера есть свои свойства для управления размером и порядком.

flex-grow — коэффициент роста. Показывает, какую долю свободного пространства займёт элемент. По умолчанию 0 — элемент не растёт. Если задать flex-grow: 1 всем элементам, они поделят пространство поровну. Если одному задать 2, а остальным 1 — он займёт в два раза больше.

flex-shrink — коэффициент сжатия. Работает наоборот: как элемент уменьшается, если не хватает места. По умолчанию 1 — элемент может сжиматься. 0 — элемент не сжимается, даже если вылезает за границы.

flex-basis — базовый размер элемента до распределения свободного пространства. Можно задать в пикселях, процентах или auto (по умолчанию, берёт размер контента). Работает как width для row или height для column, но с учётом flex-логики.

Есть сокращённое свойство flex, которое объединяет три предыдущих: flex: 1 0 auto означает flex-grow: 1, flex-shrink: 0, flex-basis: auto. В 90% случаев используют либо flex: 1 (растёт и сжимается), либо flex: 0 0 200px (фиксированный размер).

order меняет порядок элементов. По умолчанию все элементы имеют order: 0. Элементы с меньшим order идут первыми. Можно задать отрицательные значения. Полезно для адаптива — на мобильных переставить блоки без изменения HTML.

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

Центрирование элемента — самая частая задача. Решается двумя строками:

.container {
  display: flex;
  justify-content: center; /* горизонталь */
  align-items: center;     /* вертикаль */
}

Адаптивная навигация. На десктопе элементы в строку, на мобильных — в колонку:

.nav {
  display: flex;
  flex-direction: row; /* десктоп */
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column; /* мобильные */
  }
}

Равные колонки с gap между ними:

.container {
  display: flex;
  gap: 20px; /* отступ между элементами */
}

.item {
  flex: 1; /* все элементы одинаковой ширины */
}

Прижать футер к низу страницы:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto; /* прижимается к низу */
}

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

❌ Забыть про flex-wrap — элементы сжимаются до нечитаемости вместо переноса на новую строку. Решение: добавить flex-wrap: wrap.

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

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

❌ Не учитывать базовый размер при flex: 1 — элементы делят пространство пропорционально, но с учётом исходного контента. Если нужна строгая пропорция, задавайте flex-basis: 0.

❌ Вкладывать слишком много flex-контейнеров — усложняет отладку и снижает производительность. Проще использовать Grid для общей структуры, Flexbox для компонентов.

Инструменты для работы