Кратко

  • Первый публичный проект Flexible Box Layout W3C от 23 июля 2009 года описывал элементы, которые растут при наличии свободного места и сжимаются при его нехватке; среди ранних свойств было box-flex.
  • Кандидатская спецификация от 18 сентября 2012 года использовала display: flex, коэффициенты роста, сжатия и базовый размер. Документ от 19 ноября 2018 года подчёркивал, что визуальная перестановка не меняет порядок в источнике, озвучивании и клавиатурной навигации.

На панели инструментов жили три ребёнка и родитель с раздвижными стенами. Поле поиска просило места побольше. Кнопка с длинной надписью не желала оставлять половину имени за дверью. Третьей хватало своего угла, пока окно не сузилось. Фиксированные размеры и ловкие подпорки приходилось пересматривать при каждом новом размере экрана. Flexbox записал правила дележа прямо в модель раскладки. Спорить семья не перестала, зато появился способ считать.

Первый публичный рабочий проект Flexible Box Layout W3C от 23 июля 2009 года описывал коробки для интерфейса. Их дети располагались горизонтально или вертикально, забирали лишнее место либо сжимались при нехватке. Документ называл модель коробок интерфейсов XUL своим источником. Тогдашний словарь включал display: box, box-orient, box-flex, box-lines. Эти названия важны как свидетельство ранней конструкции, но старый пример нельзя просто выдать за сегодняшнюю инструкцию к CSS.

box-flex задавал относительную гибкость. Элемент с коэффициентом два мог получить большую долю свободного пространства, чем элемент с коэффициентом один. Но максимальная ширина останавливала рост одного ребёнка и отдавала остаток другому. Собственный размер содержимого и нижние границы тоже участвовали в дележе. Родитель давал комнату, дети претендовали на доли в установленных пределах. Это лучше подходило живой панели, чем мебель, прибитая к полу.

Кандидатская спецификация W3C от 18 сентября 2012 года перестроила систему. display: flex и inline-flex создавали контейнер. Его элементы шли по главной оси; поперёк лежала другая. Краткое свойство flex объединяло базовый размер, коэффициент роста и коэффициент сжатия. Сколько места элемент занимает в начале? Какую долю запаса забирает? Сколько уступает в тесноте? Поле поиска могло растянуться, а кнопка меню сохранить площадь, на которую удобно нажимать. При сужении окна браузер пересчитывал договор.

Коэффициент два не означает, что конечная ширина всегда станет вдвое больше соседней. Исходные размеры и ограничения у детей могут различаться. Положительный остаток распределяется по коэффициентам роста; при дефиците работают сжатие и размеры. Важнее понять, кто примет изменение, когда контейнер изменится. Автор записывает отношения в CSS, браузер применяет арифметику при каждом новом размере.

У комнаты есть направление. Ряд может пойти в обратную сторону или превратиться в колонку. Если разрешён перенос, не поместившиеся элементы отправляются на следующую строку. Выравнивание располагает их вдоль обеих осей. Вкладывая горизонтальные коробки в вертикальные, можно собрать сложный экран. Однако каждый flex-контейнер сначала решает свой вопрос вдоль главной оси. Это местное распределение отличается от общего плана строк и колонок CSS Grid, которому посвящена другая история.

Потом дети нашли способ менять рассадку. Свойство order в документе 2012 года меняет визуальное расположение. При этом речь и обычная последовательная навигация продолжают следовать порядку элементов в исходном документе. Кнопка, увиденная первой, может получить фокус позже других. Человек с мышью и человек с клавиатурой проходят одну панель разными маршрутами. Переставить стулья для фотографии оказалось проще, чем переписать список гостей.

Кандидатская спецификация W3C от 19 ноября 2018 года ещё отчётливее провела эту границу. order и обратные направления служат внешнему виду, а не исправлению неверного исходного порядка. Она уточнила и арифметику излишка. Коэффициенты роста меньше единицы способны оставить часть положительного пространства свободной. «Гибкий» не означает, что последний пиксель непременно будет съеден. Пустая полоска может свидетельствовать о точном исполнении правил.

Перевод делает надпись длиннее, меняя исходный размер. Минимальная ширина не позволяет другому элементу ужаться так сильно, как хотелось дизайнеру. Перенос создаёт новую строку и новый расчёт. Flexbox реагирует на эти условия, но не выбирает за редактора, какая кнопка важнее читателю. Сначала надо решить, в каком порядке человек должен встретить действия. Затем можно подбирать базовые размеры, коэффициенты и выравнивание.

Flexbox сделал родительскую коробку распорядителем меняющегося пространственного бюджета. Дети растут и уступают по объявленным правилам, браузер повторяет расчёт при каждом изменении окна. Автор отвечает за осмысленный порядок документа. Пусть кнопки торгуются за место; читателю не нужны две несовпадающие карты одной панели.