CSS Flexbox для начинающих: практическое руководство с примерами

CSS Flexbox для начинающих — это практическое руководство, которое поможет уверенно использовать гибкие контейнеры для выравнивания, адаптивных рядов и базовой компоновки. Ниже — понятные объяснения, рабочие сниппеты и советы, которые применимы в ежедневной вёрстке.

Что такое Flexbox и когда его выбирать

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

Быстрый старт: свойства контейнера

Чтобы включить режим, объявите родителю display: flex. Дальше управляем направлением, переносом и отступами между элементами.

.container {
  display: flex;              /* включаем Flexbox */
  flex-direction: row;        /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;            /* nowrap | wrap | wrap-reverse */
  gap: 16px;                  /* безопасная замена "margin" между элементами */
}

Главная ось (main axis) задаётся flex-direction: при row — горизонталь, при column — вертикаль. Перенос по строкам включается через flex-wrap. gap аккуратно расставляет расстояния без отрицательных маргинов и псевдоэлементов.

Выравнивание по осям

.center-box {
  display: flex;
  justify-content: center; /* по главной оси */
  align-items: center;     /* по поперечной оси */
  min-height: 300px;
  background: #f6f7fb;
}

Для краткости можно использовать flex-flow:

.row-wrap { flex-flow: row wrap; }
.column-nowrap { flex-flow: column nowrap; }

Свойства элементов: grow, shrink, basis и шорткат flex

Поведение дочерних блоков управляется тремя параметрами:

Шорткат: flex: grow shrink basis.

/* Равные колонки */
.item { flex: 1 1 0; } /* все делят свободное место поровну */

/* Фиксированная сайдбар + резиновый контент */
.sidebar { flex: 0 0 280px; }
.content { flex: 1 1 auto; }

Важно: предпочитайте flex-basis вместо width для контроля размера по главной оси — это предсказуемее в гибких рядах.

Готовые паттерны на Flexbox

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

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

2) Шапка сайта с кнопкой справа

.header { display: flex; align-items: center; gap: 12px; }
.header__spacer { margin-left: auto; }

<header class="header">
  <a class="logo">Brand</a>
  <nav>...</nav>
  <div class="header__spacer"></div>
  <button>Войти</button>
</header>

3) Ряд карточек, который красиво переносится

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card { flex: 1 1 280px; } /* цель: 3-4 в ряд, на мобилках по одной */

4) Прилипший футер без позиционирования

html, body { height: 100%; }
body {
  min-height: 100svh;        /* учитывает динамические панели на мобильных */
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
footer { padding: 16px; background: #f1f3f5; }

Практический пример: лейаут «сайдбар + контент + виджет»

.layout { display: flex; gap: 24px; }
.sidebar { flex: 0 0 260px; }
.content { flex: 1 1 auto; min-width: 0; }   /* min-width:0 предотвращает вылезание текста */
.widget  { flex: 0 1 320px; }

@media (max-width: 1024px) {
  .layout { flex-wrap: wrap; }
  .widget { flex-basis: 100%; }
}

<div class="layout">
  <aside class="sidebar">...</aside>
  <main class="content">Длинный текст и таблицы</main>
  <section class="widget">Блок с промо</section>
</div>

Частые ошибки и как их избегать

Отладка Flexbox

Мини-шпаргалка по значениям

/* Контейнер */
.container { display:flex; flex-flow: row wrap; gap: 1rem; }
.container.center { justify-content:center; align-items:center; }
.container.between { justify-content: space-between; }

/* Элементы */
.flex-1 { flex: 1 1 0; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: 0 0 auto; }
.basis-300 { flex-basis: 300px; }
.shrink-0 { flex-shrink: 0; }

Что дальше изучать

Освоив базу Flexbox, добавляйте CSS Grid для сложных сеток, современную типографику и методологии (BEM). Лучший способ закрепить знания — сверстать реальный макет с нуля. Рекомендую практический курс: Прокачать Flexbox и вёрстку на практике — курс «Вёрстка сайта с нуля 2.0».

Итог

CSS Flexbox для начинающих — это быстрый путь к предсказуемому выравниванию и адаптивным интерфейсам. Используйте flex-basis вместо width, помните про min-width: 0, применяйте gap и проверяйте переносы — и ваши макеты будут собираться чисто и без «костылей».

Источник