ШПАРГАЛКА

CSS Flexbox

Шпаргалка по CSS Flexbox: flex-контейнер и элементы, оси, justify-content, align-items, flex-grow/shrink/basis, gap и готовые рецепты вёрстки.

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

Контейнер и элементы

Flexbox работает на двух уровнях. Flex-контейнер — это родитель, которому задают display: flex (или inline-flex). Flex-элементы — это его прямые потомки. Внуки уже не управляются этим контейнером.

.container {
  display: flex; /* контейнер */
}
/* Любой прямой ребёнок .container становится flex-элементом */

Свойства делятся на две группы: одни задаются контейнеру (направление, выравнивание, перенос), другие — элементам (рост, сжатие, базовый размер, порядок).

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

Всё выравнивание в Flexbox строится вокруг двух осей. Главная ось (main axis) — направление, вдоль которого выкладываются элементы, его задаёт flex-direction. Поперечная ось (cross axis) — перпендикулярна главной.

  • При flex-direction: row главная ось идёт слева направо, поперечная — сверху вниз.
  • При flex-direction: column главная ось идёт сверху вниз, поперечная — слева направо.

Это важно запомнить: justify-content выравнивает по главной оси, а align-items — по поперечной. При смене направления они как бы «меняются местами».

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

display: flex

Включает flex-раскладку. flex делает контейнер блочным, inline-flex — строчным (контейнер ведёт себя как inline-элемент, но внутри — flex).

.block { display: flex; }
.inline { display: inline-flex; }

flex-direction

Задаёт главную ось и направление выкладки элементов.

.container { flex-direction: row; }            /* по умолчанию: слева направо */
.container { flex-direction: row-reverse; }    /* справа налево */
.container { flex-direction: column; }         /* сверху вниз */
.container { flex-direction: column-reverse; } /* снизу вверх */

flex-wrap

Разрешает или запрещает перенос элементов на новые строки, если им не хватает места. По умолчанию перенос выключен и элементы сжимаются.

.container { flex-wrap: nowrap; }       /* по умолчанию: в одну строку, сжимая */
.container { flex-wrap: wrap; }         /* переносить на новые строки */
.container { flex-wrap: wrap-reverse; } /* переносить, но строки в обратном порядке */

flex-flow

Сокращённая запись для flex-direction и flex-wrap в одну строку.

.container {
  flex-flow: row wrap;
  /* эквивалент: flex-direction: row; flex-wrap: wrap; */
}

justify-content

Выравнивание элементов вдоль главной оси и распределение свободного места между ними.

.container { justify-content: flex-start; }    /* к началу */
.container { justify-content: center; }        /* по центру */
.container { justify-content: space-between; }  /* по краям, промежутки равны */
.container { justify-content: space-around; }   /* равные отступы вокруг */

align-items

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

.container { align-items: stretch; }    /* по умолчанию: растянуть на всю высоту */
.container { align-items: center; }     /* по центру поперечной оси */
.container { align-items: flex-start; } /* к началу поперечной оси */
.container { align-items: baseline; }   /* по базовой линии текста */

align-content

Распределяет строки по поперечной оси, когда элементы переносятся (flex-wrap: wrap) и строк несколько. Если строка одна — свойство не действует.

.container {
  flex-wrap: wrap;
  align-content: space-between; /* строки прижаты к краям контейнера */
}
/* Значения те же: flex-start, center, space-between, space-around, stretch */

gap

Задаёт расстояние между элементами без хаков с margin. Можно указать общий промежуток или раздельно для строк и колонок (row-gap / column-gap).

.container { gap: 16px; }          /* одинаковый промежуток по обеим осям */
.container { gap: 8px 24px; }      /* row-gap: 8px; column-gap: 24px */
.container { column-gap: 24px; }   /* только между колонками */

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

order

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

.item-first { order: -1; } /* встанет раньше остальных */
.item-last  { order: 1; }  /* уйдёт в конец */

flex-grow

Коэффициент роста: как элемент делит свободное место. 0 — не растёт, 1 — забирает свободное место, элемент с 2 получит вдвое больше, чем с 1.

.item { flex-grow: 1; } /* все такие элементы делят место поровну */
.wide { flex-grow: 2; } /* получит в два раза больше свободного места */

flex-shrink

Коэффициент сжатия, когда места не хватает. По умолчанию 1 (элементы сжимаются). 0 запрещает сжатие.

.fixed { flex-shrink: 0; } /* не сжимать, даже если не помещается */

flex-basis

Задаёт начальный размер элемента вдоль главной оси до распределения свободного места. Может быть в px, % или auto (размер по содержимому).

.item { flex-basis: 200px; } /* стартовая ширина (в row) — 200px */
.item { flex-basis: 25%; }   /* четверть контейнера */

flex (шорткат)

Сокращённая запись flex-grow flex-shrink flex-basis. Самые частые значения стоит помнить наизусть.

.item { flex: 1; }        /* 1 1 0% — равные гибкие колонки */
.item { flex: auto; }     /* 1 1 auto — растёт от размера контента */
.item { flex: none; }     /* 0 0 auto — фиксированный, не гнётся */
.item { flex: 0 0 200px; } /* фиксированные 200px */

align-self

Переопределяет align-items контейнера для одного конкретного элемента.

.special { align-self: flex-end; } /* этот элемент прижат к концу поперечной оси */

Таблица значений выравнивания

Главная разница: justify-content работает по главной оси, align-items — по поперечной. Часть значений у них совпадает.

Значениеjustify-content (главная ось)align-items (поперечная ось)
flex-startПрижать к началу осиПрижать к началу оси
flex-endПрижать к концу осиПрижать к концу оси
centerПо центруПо центру
space-betweenКрайние к краям, промежутки равны—
space-aroundРавные отступы вокруг каждого—
space-evenlyВсе промежутки строго равны—
stretch—Растянуть на всю поперечную ось
baseline—По базовой линии текста

Типичные рецепты

Идеальное центрирование

Самый частый приём: элемент строго по центру по обеим осям.

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

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

Несколько колонок одинаковой ширины, делящих контейнер поровну.

.row {
  display: flex;
  gap: 16px;
}
.row > .col {
  flex: 1; /* 1 1 0% — все колонки равной ширины */
}

Прижать футер к низу

Колоночный layout: контент растягивается, футер всегда внизу экрана.

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page .main {
  flex: 1; /* забирает всё свободное место, выталкивая футер вниз */
}

Навбар: логотип слева, меню справа

Классический навбар с разнесением элементов по краям.

.navbar {
  display: flex;
  align-items: center;            /* по вертикали по центру */
  justify-content: space-between; /* логотип влево, меню вправо */
  gap: 24px;
}
.navbar .menu {
  display: flex;
  gap: 16px;
}

Альтернатива: оставить элементы в начале, а нужный блок отодвинуть в конец через margin-left: auto.

.navbar .menu {
  margin-left: auto; /* «съедает» всё свободное место слева */
}

Адаптивные карточки

Ряд карточек, которые переносятся на новую строку и сохраняют разумную ширину.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.cards .card {
  flex: 1 1 280px; /* растут и сжимаются, но не уже 280px */
}

Подробнее о свойствах и значениях смотрите в спецификации MDN: CSS Flexible Box Layout.

Поддержать проект