CSS Flexbox

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

Зачем нужно

До Flexbox выравнивание и центрирование делалось через float, table-cell и отрицательные margin — хаки, которые ломались при изменении контента. Flexbox решает эти задачи декларативно: одна строка display: flex превращает контейнер в гибкую систему распределения пространства. Он особенно хорош для одномерных компонентов: навбаров, карточек, форм, кнопочных групп.

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

  • Навигационные меню и хедеры
  • Карточные компоненты и списки
  • Центрирование элементов по обеим осям
  • Формы с полями и подписями в ряд
  • Адаптивные компоненты с flex-wrap

Основные понятия

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

.container {
  display: flex; /* или inline-flex */
}
/* Все прямые потомки автоматически становятся flex-элементами */

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

Главная и поперечная ось

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

  Main Axis →
  ┌──────────────────┐
  │  [A]  [B]  [C]  │  ↕ Cross Axis
  └──────────────────┘

flex-direction: column

  ┌──────┐
  │ [A]  │  ↕ Main Axis
  │ [B]  │
  │ [C]  │
  └──────┘
  → Cross Axis

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

.container {
  display: flex;
  flex-direction: row;          /* row | row-reverse | column | column-reverse */
  flex-wrap: nowrap;            /* nowrap | wrap | wrap-reverse */
  justify-content: flex-start;  /* выравнивание по главной оси */
  align-items: stretch;         /* выравнивание по поперечной оси */
  align-content: stretch;       /* выравнивание строк (при wrap) */
  gap: 0;                       /* отступы между элементами */
}

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

.item {
  flex-grow: 0;       /* коэффициент расширения */
  flex-shrink: 1;     /* коэффициент сжатия */
  flex-basis: auto;   /* базовый размер */
  flex: 0 1 auto;     /* сокращение: grow shrink basis */
  order: 0;           /* порядок отображения */
  align-self: auto;   /* переопределяет align-items для одного элемента */
}

Частые паттерны

/* Центрирование по обеим осям */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Навбар: лого слева, меню справа */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Равные колонки */
.columns {
  display: flex;
  gap: 16px;
}
.columns > * {
  flex: 1;
}

/* Прижать футер вниз */
.card {
  display: flex;
  flex-direction: column;
}
.card__footer {
  margin-top: auto;
}

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

  1. justify-content и align-items применены без display: flex — свойства просто игнорируются
  2. Путаница осей при flex-direction: column — justify-content начинает работать по вертикали, align-items по горизонтали
  3. Flex-свойства применены к не-прямым потомкам — flex-grow работает только на прямых детях контейнера
  4. flex-wrap забыт — при малом пространстве элементы выходят за границы вместо переноса

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

Ресурсы