Flexbox

Flexbox (Flexible Box Layout) - это модуль CSS (Cascading Style Sheets), предназначенный для создания гибких, адаптивных и предсказуемых макетов веб-страниц, который позволяет управлять выравниванием, порядком, распределением свободного пространства и размерами элементов внутри контейнера без использования сложных хаков и фиксированных размеров.

Термин используется в веб-разработке, frontend-вёрстке, UI/UX-дизайне и при создании адаптивных интерфейсов (responsive design). Например, разработчик интернет-магазина использует Flexbox, чтобы выровнять карточки товаров в строку, автоматически переносить их на новую строку при сужении экрана, центрировать содержимое карточки по вертикали и горизонтали, а также изменить порядок элементов на мобильной версии так, чтобы кнопка «Купить» отображалась перед описанием, - и всё это без указания ширины в пикселях.

Flexbox был предложен в 2009 году как ответ на проблемы, с которыми сталкивались разработчики при создании сложных макетов с помощью традиционных методов. В 2012 году спецификация Flexbox достигла стабильного состояния, а в 2015-2016 годах получила широкую поддержку во всех современных браузерах. Сегодня Flexbox - один из двух основных инструментов для построения макетов в современном CSS, наряду с Grid, причём каждый из них решает свои задачи.

Кратко

Flexbox - это способ раскладывать элементы на веб-странице, при котором они автоматически подстраиваются под размер экрана, выравниваются как нужно и могут менять порядок без изменения HTML-кода. Вместо использования float и фиксированных размеров разработчик объявляет контейнер гибким, а браузер сам решает, как разместить элементы.

Что такое Flexbox

Flexbox (Flexible Box Layout Module) - это модель раскладки в CSS, основанная на концепции гибкого контейнера (flex container) и его гибких элементов (flex items). В отличие от блочной модели (block) и строчной модели (inline), которые работают в одном измерении, Flexbox даёт разработчику мощный контроль над выравниванием, распределением пространства и порядком элементов как по главной оси, так и по поперечной.

Ключевые понятия Flexbox:

• Flex container (гибкий контейнер) - элемент, к которому применено свойство display: flex или display: inline-flex.
• Flex items (гибкие элементы) - прямые дочерние элементы flex-контейнера.
• Главная ось (main axis) - ось, вдоль которой располагаются flex-элементы. Направление задаётся свойством flex-direction.
• Поперечная ось (cross axis) - ось, перпендикулярная главной.
• Свободное пространство (free space) - пространство внутри контейнера после размещения всех элементов.

Как работает Flexbox

Работа Flexbox строится на нескольких уровнях: настройка контейнера, настройка элементов и управление поведением при адаптации.

1. Создание flex-контейнера

Любой элемент становится flex-контейнером при применении свойства:

.container {
  display: flex;           /* блоковый flex-контейнер */
  display: inline-flex;   /* строчно-блоковый flex-контейнер */
}

2. Управление направлением оси

Свойство flex-direction определяет направление главной оси:

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

3. Управление переносом строк

Свойство flex-wrap определяет, будут ли элементы переноситься на новую строку:

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

4. Выравнивание вдоль главной оси

Свойство justify-content управляет распределением элементов вдоль главной оси:

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

5. Выравнивание вдоль поперечной оси

Свойство align-items управляет выравниванием элементов внутри строки:

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

6. Управление элементами

Flex-элементы получают дополнительные свойства для управления своим поведением:

• order - меняет порядок элемента. По умолчанию 0.
• flex-grow - способность элемента увеличиваться.
• flex-shrink - способность элемента уменьшаться.
• flex-basis - базовый размер элемента до распределения пространства.
• flex - сокращённая запись для flex-grow, flex-shrink, flex-basis.
• align-self - переопределяет align-items для конкретного элемента.

7. Многострочное выравнивание

Свойство align-content управляет выравниванием строк при использовании flex-wrap: wrap:

.container {
  align-content: stretch;      /* растянуть строки (по умолчанию) */
  align-content: flex-start;   /* прижать строки к началу */
  align-content: flex-end;     /* прижать к концу */
  align-content: center;       /* по центру */
  align-content: space-between;/* отступы между строками */
  align-content: space-around; /* отступы вокруг строк */
}

Преимущества

• Гибкость и адаптивность: элементы автоматически подстраиваются под размеры экрана без медиазапросов.
• Простота вертикального выравнивания: задача решается одной строкой align-items: center.
• Изменение порядка без изменения HTML: с помощью order можно менять визуальный порядок для разных устройств.
• Распределение свободного пространства: justify-content и flex позволяют создавать сложные раскладки.
• Отказ от float и табличной вёрстки: исчезают проблемы с очисткой (clearfix) и непредсказуемым поведением.
• Поддержка современных браузеров: начиная с 2020 года Flexbox поддерживается во всех актуальных браузерах.

Недостатки и ограничения

• Не предназначен для двумерных сеток: для полноценных сеток лучше подходит Grid.
• Сложность с фиксированными колонками: для сеток с фиксированной шириной одних колонок и резиновой других Grid решает задачу проще.
• Отсутствие поддержки в старых браузерах: Internet Explorer 10 и 11 поддерживают Flexbox с ошибками и ограничениями.
• Проблемы с доступностью: чрезмерное использование order может нарушить логический порядок для скринридеров.

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

Тип интерфейса	Пример использования Flexbox
Навигационные панели (Navbars)	Горизонтальное меню с логотипом слева, ссылками по центру и кнопкой авторизации справа
Карточки товаров	Выравнивание карточек в строку, автоматический перенос, центрирование содержимого
Формы и поля ввода	Выравнивание label и input, вертикальное центрирование иконок
Центрирование элементов	Вертикальное и горизонтальное центрирование модальных окон и лоадеров
Футеры (footer)	Прижатие футера к низу страницы с помощью margin-top: auto
Списки и сетки с равномерным распределением	Галереи изображений с одинаковым расстоянием между элементами
Мобильные интерфейсы	Изменение порядка элементов через order для мобильной версии

Сравнение с альтернативными методами вёрстки

Метод	Принцип работы	Преимущества	Недостатки
Flexbox	Гибкий контейнер, элементы управляются через оси	Вертикальное выравнивание, порядок элементов, распределение пространства	Не предназначен для двумерных сеток
Grid	Двумерная сетка с контролем строк и колонок	Мощные сетки, контроль перекрытий, независимость от порядка в HTML	Более сложный синтаксис, избыточен для простых раскладок
Float	Элементы вырываются из потока, обтекаются текстом	Поддержка во всех браузерах, включая IE6	Требует очистки (clearfix), сложное вертикальное выравнивание
Табличная вёрстка (display: table)	Имитация поведения HTML-таблиц	Вертикальное выравнивание, одинаковые высоты колонок	Громоздкий синтаксис, неадаптивность
Позиционирование (position)	Элементы извлекаются из потока или позиционируются относительно предков	Точный контроль координат	Сложно создавать адаптивные макеты

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

В чём разница между Flexbox и Grid?

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

Нужно ли использовать вендорные префиксы для Flexbox?

Для современных браузеров (Chrome, Firefox, Safari, Edge) префиксы не нужны. Для поддержки Internet Explorer 10 и 11 требуются префиксы -ms- и осторожность, так как IE10 поддерживает только старую спецификацию. Если проект не требует поддержки IE, можно использовать чистый Flexbox.

Почему элементы не переносятся на новую строку?

Необходимо проверить, что у контейнера установлено flex-wrap: wrap. По умолчанию стоит flex-wrap: nowrap, и элементы будут сжиматься, но не переноситься.

Как сделать так, чтобы последняя строка в сетке не растягивалась?

При использовании flex-wrap: wrap и justify-content: space-between последняя строка с меньшим количеством элементов будет прижата к левому краю, а между ними будут большие отступы. Решение - добавить пустые элементы (плейсхолдеры) с нулевой высотой или использовать Grid, который лучше управляет такими ситуациями.

Как центрировать элемент по вертикали и горизонтали?

Достаточно сделать родительский элемент flex-контейнером и применить:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

• CSS
• Grid
• Веб-разработка
• Frontend
• Адаптивный дизайн
• Float
• Производительность сайта
• UX/UI дизайн