Интерактивное руководство

Flexbox в точной настройке

Исследуйте поведение Flexbox на интерактивном примере, сравнивайте варианты выравнивания и получайте готовый CSS для своих интерфейсов.

Открыть интерактивный пример Перейти к свойствам

flex-demo.css

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

Живая демонстрация

Настройте контейнер своими руками

Изменения применяются моментально. Код под демо обновляется автоматически.

Параметры контейнера

flex-direction

justify-content

align-items

flex-wrap

gap 16px

flex-basis 110px

flex-grow 0

Количество элементов 5

Готовый CSS

Основные возможности

Что умеет Flexbox

Контейнер управляет общим расположением, а элементы — собственным размером и порядком.

Главная ось

Определяет направление элементов: строка, колонка или обратный порядок.

flex-direction

Распределение

Управляет свободным пространством вдоль главной оси контейнера.

justify-content

Выравнивание

Выравнивает элементы по поперечной оси: сверху, по центру или на всю высоту.

align-items

Перенос строк

Позволяет переносить элементы на новую строку при нехватке места.

flex-wrap

Гибкий размер

Элемент может расти, сжиматься и иметь базовый размер до распределения места.

flex: grow shrink basis

Порядок и исключения

Отдельный элемент может менять порядок или собственное выравнивание.

order · align-self

Шпаргалка

Минимальный набор для работы

В большинстве интерфейсов достаточно этих свойств. Начинайте с контейнера, затем настраивайте отдельные элементы.

Базовый набор свойств

Включить Flexbox display: flex;

Горизонтальный центр justify-content: center;

Вертикальный центр align-items: center;

Центр по двум осям display: flex; justify-content: center; align-items: center;

Отступы между элементами gap: 16px;

Перенос карточек flex-wrap: wrap;

Равная ширина колонок flex: 1 1 0;

Практические советы

Как использовать без лишних проблем

Используйте gap

Для промежутков между flex-элементами обычно лучше применять gap, а не сложные комбинации margin.

Следите за min-width

У длинного контента внутри flex-элемента иногда нужен min-width: 0, иначе блок может растянуть контейнер.

Flex для одномерных раскладок

Flexbox особенно удобен для строк, колонок, меню, карточек и выравнивания интерфейсных элементов.

Grid для сложных сеток

Когда нужно одновременно управлять строками и колонками, CSS Grid часто будет понятнее и стабильнее.