Flexbox умер, да здравствует Flexbox!
(перевод заметки из блога Тэба Эткинса, участника рабочей группы CSS в W3C, редактора ряда спецификаций)
Я вот уже месяц собираюсь написать этот пост. Плоховато у меня с планированием времени.
Если вы следили за моим блогом в последний год или около того, вы наверняка в курсе, что я — основной редактор спецификации CSS Flexbox. Я взялся за эту спецификацию, потому что посчитал, что исходная спецификация была слишком буквально "слизана" с XUL, и что мы можем сделать лучше. В частности, я надеялся переписать спецификацию так, чтобы можно было использовать обычные свойства боксовой модели (ширину, высоту, отступы, поля), придавая им гибкость напрямую. Покопавшись в моих архивах, вы найдете несколько попыток переписать ее в таком ключе.
Что ж, эксперимент закончился. Спецификация вернулась к виду, очень напоминающему исходный. Мне малость грустно от этого, но это был правильный выбор. К сожалению, когда вы связаны приданием гибкости свойствам боксовой модели, некоторые полезные вещи оказываются попросту невозможны, а еще некоторые — избыточно сложны.
В частности, flex-pack: distribute не реализовать без свистоплясок с margin-ами для :first/last-child, совсем как оно бывает сейчас в подобных задачах. flex-align: baseline вообще нереализуемо. Все свойства flex-pack нереализуемы, если флексбокс многострочный. К управлению распределением/выравниванием строк в многострочном флексбоксе я так и не подобрался. Строки — не настоящие боксы, до них не достучишься, чтобы подогнать их margin-ы и т.п., разве что дополнительный псевдоэлемент добавить. Едва вам понадобится специальное свойство для управления выравниванием, тотчас находится смысл в управлении вообще всем выравниванием через это свойство.
Были и кое-какие удачи. Я объединил старые свойства box-direction и box-orientation в одно свойство flex-flow (синтаксис flex-flow поначалу кажется жутковатым, но на практике он вполне прост). Свойство box-flex-group я выкосил напрочь, а box-ordinal-group переименовал в гораздо более "человеческое" flex-order. И самое важное: width и height сохранили возможность приобретать гибкость напрямую — вместо вынесения ее в отдельное свойство box-flex. Многие авторы (включая самого босса рабочей группы CSS!) годами путались в том, как этот box-flex работал. Я очень рад, что теперь этому настал конец.
Еще одной ложкой меда стало то, что Flexbox и Grid Layout теперь содержат много общих идей, так что изучение одной из них поможет понять другую. Я в восторге от этого. Новые модели раскладки должны быть настолько простыми и понятными, насколько они вообще оправдывают своё существование, и теперь эти две стали совместимыми, и это хороший повод быть совместимыми для любых будущих моделей раскладки. Класс! Я собираюсь и дальше наделять их общими идеями, чтобы обеспечить единообразие общего алгоритма раскладки и чтобы всё было предсказуемо.
Спецификация сейчас вполне стабильна, и я доволен этим. У меня есть пара-тройка неясных вопросов о значении нескольких свойств, которые мы сейчас обсуждаем в рабочей группе (в частности, можно ли упростить flex-flow и как именно должно работать значение center у трех разных свойств для выравнивания). Как только мы с ними разберемся, мне останется лишь превратить мой набросок алгоритма раскладки во что-то типа подробного нормативного документа, вроде того, что было раньше. Затем я смогу выпустить рабочий черновик, с надеждой довести его до кандидата в рекомендации, написать тесты и продолжить работу уже на новом рубеже. Здорово!
Если вам есть что сказать о черновике, не стесняйтесь писать мне лично или на www-style@w3.org c темой письма, начинающейся со слова "[css3-flexbox]".
P.S. Это тоже может быть интересно: