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. Это тоже может быть интересно:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.