Flexbox: состав и свойства технологии¶

Flexbox (Flexible Box Layout Module, «модуль гибкой компоновки») — модуль CSS, описывающий модель одномерной раскладки элементов внутри контейнера. Входит в состав спецификаций консорциума W3C; первый рабочий черновик опубликован в 2009 году, статус кандидата в рекомендации получен в 2012 году. «Состав» Flexbox принято рассматривать как совокупность двух групп свойств: свойств flex-контейнера (родителя) и свойств flex-элементов (дочерних блоков), а также осей и параметров выравнивания, задающих поведение раскладки.

¶Общая модель

Flexbox оперирует двумя осями. Главная ось (main axis) задаётся свойством flex-direction и определяет направление укладки элементов. Поперечная ось (cross axis) перпендикулярна главной. Размеры вдоль главной оси называют main size, вдоль поперечной — cross size. Контейнер распределяет свободное пространство между элементами по правилам, заданным свойствами flex-grow, flex-shrink и flex-basis.

Модуль активируется присвоением контейнеру значения display: flex (блочный контейнер) или display: inline-flex (строчный контейнер). После этого все прямые потомки становятся flex-элементами и подчиняются правилам модуля; их собственные float, clear и vertical-align перестают действовать.

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

К свойствам родителя относятся:

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

К свойствам потомков относятся:

• order — целое число, меняющее порядок отображения без изменения разметки; по умолчанию 0.
• flex-grow — коэффициент «жадности»: доля свободного пространства, которую забирает элемент. По умолчанию 0.
• flex-shrink — коэффициент сжатия при нехватке места. По умолчанию 1.
• flex-basis — базовый размер вдоль главной оси (auto, длина, процент).
• flex — сокращение, объединяющее три предыдущих свойства; распространённые записи: flex: 1 (растягиваться), flex: 0 0 auto (фиксированный размер).
• align-self — индивидуальное переопределение align-items для конкретного элемента.

¶Алгоритм распределения пространства

Сначала каждому элементу назначается базовый размер по flex-basis (или по содержимому, если задано auto). Затем вычисляется свободное пространство контейнера. Если оно положительное, оно распределяется пропорционально flex-grow; если отрицательное — элементы сжимаются пропорционально flex-shrink с учётом их базовых размеров. Итоговые позиции определяются значениями justify-content и align-items (или align-self).

¶История и стандартизация

Идея гибкой раскладки развивалась с начала 2000-х; ранние варианты (display: box, затем display: flexbox) использовались в WebKit и Gecko. Современный синтаксис (display: flex) закрепился к 2012 году. Массовая поддержка браузерами сложилась к 2015–2016 годам, после чего Flexbox стал стандартным инструментом вёрстки. Часть ранних префиксных реализаций (-webkit-box) сохранялась для совместимости со старыми версиями браузеров.

¶Применение

Flexbox применяется для:

• выравнивания элементов по центру по обеим осям;
• построения навигационных меню, панелей инструментов, карточек;
• равномерного распределения блоков с автоматическими промежутками;
• создания «липкого» подвала (sticky footer) и колонок равной высоты;
• управления порядком элементов без правки HTML.

¶Отличия от Grid и float

В отличие от CSS Grid, Flexbox — одномерная модель: он управляет раскладкой вдоль одной оси за раз, тогда как Grid задаёт двумерную сетку строк и столбцов. Для простых линейных структур (меню, ряды кнопок) Flexbox проще и достаточен; для сложных макетов с явными строками и столбцами предпочтительнее Grid. Обе модели совместимы: flex-элемент может быть grid-контейнером и наоборот. По сравнению с устаревшими приёмами на float и inline-block, Flexbox избавляет от хаков с очисткой потоков и выравниванием.

¶Ограничения

Flexbox не предназначен для двумерных сеток, не поддерживает перекрытие элементов (как grid-area) и не создаёт автоматических строк без переноса. Вложенные flex-контейнеры могут усложнять отладку. Исторически существовали расхождения в реализации flex-basis и вычислении размеров между движками браузеров, что требовало дополнительного тестирования.

¶Совместимость и особенности

Модуль поддерживается всеми актуальными браузерами. Для старых версий Internet Explorer (10–11) применялись частичные реализации с известными дефектами вычисления flex-basis. Свойство gap в flex-контейнерах получило широкую поддержку позднее, чем в Grid, поэтому в легаси-проектах промежутки нередко эмулировались через margin.