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

Flexbox (Flexible Box Layout) — система одномерной раскладки в CSS. С её помощью выравнивают элементы по строке или колонке, распределяют пространство и строят любые UI-компоненты — без float, без таблиц, без лишнего кода.

Что такое Flexbox и как он работает

До Flexbox вёрстка горизонтальных блоков требовала float, inline-block и множества хаков. Flexbox решает это одной строкой.

/* Превратить контейнер во flex-контейнер */
.container {
  display: flex;
}

/* Теперь все прямые дочерние элементы — flex-items */
/* Они автоматически выстраиваются в строку */

Два ключевых понятия: flex-контейнер (элемент с display: flex) и flex-items (прямые дочерние элементы контейнера). Свойства flexbox делятся на две группы: для контейнера и для отдельных элементов.

flex-direction — направление главной оси

.container { flex-direction: row; }
/* → Элементы в строку (по умолчанию): [1][2][3] */

.container { flex-direction: row-reverse; }
/* ← Строка в обратном порядке: [3][2][1] */

.container { flex-direction: column; }
/* ↓ Элементы в колонку:
      [1]
      [2]
      [3]  */

.container { flex-direction: column-reverse; }
/* ↑ Колонка в обратном порядке */

Направление flex-direction определяет главную ось. justify-content выравнивает по главной оси, align-items — по поперечной (перпендикулярной).

justify-content — выравнивание по горизонтали (главная ось)

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

.container { justify-content: flex-start; }
/* | [1][2][3]         |  ← все к началу */

.container { justify-content: flex-end; }
/* |         [1][2][3] |  ← все к концу */

.container { justify-content: center; }
/* |    [1][2][3]      |  ← по центру */

.container { justify-content: space-between; }
/* | [1]    [2]    [3] |  ← первый к краю, последний к краю, остальные равномерно */

.container { justify-content: space-around; }
/* |  [1]  [2]  [3]   |  ← равные отступы вокруг каждого */

.container { justify-content: space-evenly; }
/* | [1]  [2]  [3]  |    ← все промежутки одинаковы, включая крайние */

align-items — выравнивание по вертикали (поперечная ось)

.container { align-items: stretch; }
/* Элементы растягиваются на всю высоту контейнера (по умолчанию) */

.container { align-items: flex-start; }
/* Элементы прижаты к верхнему краю */

.container { align-items: flex-end; }
/* Элементы прижаты к нижнему краю */

.container { align-items: center; }
/* Элементы по центру вертикально ← самое частое использование */

.container { align-items: baseline; }
/* Выравнивание по базовой линии текста */

gap — отступы между flex-элементами

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

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

/* gap заменяет старый подход с margin: */
/* НЕ НУЖНО: .item + .item { margin-left: 16px; } */
/* НУЖНО: .container { gap: 16px; } */

flex-wrap — перенос элементов на новую строку

.container { flex-wrap: nowrap; }
/* По умолчанию — элементы не переносятся, сжимаются если не влезают */

.container { flex-wrap: wrap; }
/* Элементы переносятся на следующую строку когда не влезают */

.container { flex-wrap: wrap-reverse; }
/* Перенос в обратном направлении (снизу вверх) */

/* Типичный паттерн для адаптивных карточек: */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* мин. 300px, растягивается */
}

Свойства flex-elements — управление отдельными элементами

/* flex: grow shrink basis — сокращённая запись трёх свойств */

.item { flex: 1; }
/* = flex: 1 1 0 — занять всё доступное место, делить поровну */

.item { flex: 0 0 200px; }
/* Фиксированный элемент: не растягивается, не сжимается, ширина 200px */

.item { flex: 2; }
/* Занять вдвое больше места, чем flex: 1 */

/* Пример: сайдбар 250px + гибкий контент */
.sidebar  { flex: 0 0 250px; }  /* фиксированный */
.content  { flex: 1; }          /* занимает всё остальное */

/* align-self — переопределить align-items для одного элемента */
.special-item { align-self: flex-end; }  /* прижать к низу */

/* order — изменить порядок без изменения HTML */
.item-first { order: -1; }  /* переместить в начало */
.item-last  { order: 99; }  /* переместить в конец */

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

Навигационная панель (navbar)

<!-- HTML -->
<nav class="navbar">
  <div class="navbar__logo">MyBrand</div>
  <ul class="navbar__links">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
  <button class="navbar__cta">Войти</button>
</nav>

/* CSS */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* лого слева, кнопка справа */
  padding: 0 24px;
  height: 64px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

.navbar__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.navbar__links a {
  padding: 8px 16px;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}

.navbar__links a:hover {
  background: #f3f4f6;
}

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

/* Задача: разместить карточку точно по центру экрана */
.page {
  display: flex;
  justify-content: center;  /* по горизонтали */
  align-items: center;      /* по вертикали */
  min-height: 100vh;        /* полная высота экрана */
  background: #f9fafb;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  width: 400px;
}

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

.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
}

.card {
  flex: 1 1 280px;    /* мин. ширина 280px, растягивается */
  max-width: 400px;   /* не шире 400px */
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}

/* Результат: на широком экране 3 карточки в ряд,
   на планшете — 2, на мобильном — 1 */

Sticky footer — прижать футер к низу

<!-- HTML структура -->
<div class="page">
  <header>Шапка</header>
  <main>Контент страницы</main>
  <footer>Футер</footer>
</div>

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* страница минимум на весь экран */
}

main {
  flex: 1;  /* main растягивается и заполняет всё доступное место */
  /* Футер автоматически опускается вниз */
}

footer {
  flex-shrink: 0;  /* футер не сжимается */
  background: #111827;
  color: white;
  padding: 24px;
}

Шпаргалка Flexbox — все свойства

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

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

Часто задаваемые вопросы о Flexbox

Как отцентрировать div по горизонтали и вертикали через flex?

Это самый частый вопрос о Flexbox. Три строки кода для родительского элемента: display: flex, justify-content: center (центр по горизонтали), align-items: center (центр по вертикали). Не забудь задать высоту родителю, иначе align-items не будет иметь пространства для работы.

flex: 1 — что это означает?

flex: 1 — это сокращение для flex: 1 1 0. Означает: элемент может расти (flex-grow: 1), может сжиматься (flex-shrink: 1), начальный размер — 0 (flex-basis: 0). На практике: элемент занимает всё доступное пространство, деля его поровну с другими flex: 1 элементами.

Flexbox vs CSS Grid — когда что использовать?

Flexbox — для одномерных раскладок: навбар (строка), список карточек (строка с переносом), центрирование элемента. CSS Grid — для двумерных раскладок: макет страницы (шапка + сайдбар + контент + футер), галерея с точным контролем строк и колонок. На практике Flexbox и Grid часто используют вместе: Grid для общего макета страницы, Flexbox внутри каждого компонента.