Flexbox - стоит ли?

[Kelin]

Решил устроить дискуссию на тему Flexbox.

Итак, как вы считаете, стоит ли начинать использовать Flexbox в верстке или все-таки нужно еще чуть подождать, пока пользователей IE<10 не станет меньше?

[lexxcode]

ну вот Firefox вот-вот включит у себя поддержку и можно использовать

[nerv]

ссылка http://habrahabr.ru/post/153925/ для тех кто не в курсе

[Great Rash]

Я на днях пытался разобраться с флексом. У меня от этого стандарта на голове волосы зашевелились. Он такой неудобный, что диву даёшься: ну как можно было так испоганить такую отличную идею. Вот помнится статья s0rr0w была на хабре про то как он видит позиционирование элементов это был класс, эсли бы это реализовали то было б отлично. А в итоге нам подсовывают очередную корявую ерунду.

P.S. Ну я может я просто не разобрался и не понял фишки...

[lexxcode]

А что у тебя вызвало сложность, ну или неудобство?

Да, у дяди s0rr0w интересная идея, жаль, что далеко не все воспринимают ее

[SelenIT]

Имхо, смотря для какой задачи. У флексов всё-таки ноги четко растут из языка разметки интерфейсов (мозилловского XUL-а), и это сильно сказывается. Для растяжки менюхи по ширине, например — самое то. Да и для колонок, имхо, всяко лучше извратов с float-ами и псевдотаблицами. А для контента... о5 же, надо смотреть по задаче.

Главный ужас сейчас, имхо — наличие в ходу одновременно 3-х (!) фигово совместимых между собой вариантов синтаксиса. Но, по идее, это можно обойти, и даже для совсем старья обеспечить приемлемый fallback на те же float-ы. Наиболее актуальная, имхо, статья по вопросу - http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

[Great Rash]

А что у тебя вызвало сложность, ну или неудобство?

Ну например как сделать вот такую резиновую конструкцию? Чтоб резина была и по высоте и по ширине

А после, как сделать конструкцию, чтобы блоки 1 и 3 были шириной в 200px, а остальные блоки занимали всю оставшуюся ширину?

[Kelin]

для колонок, имхо, всяко лучше извратов с float-ами и псевдотаблицами

Вот именно, это очень удобно, но проблемы с синтаксисом и кроссбраузерностью меня все же вынуждают оставаться на этих самых float'ах.

ссылка http://habrahabr.ru/post/153925/ для тех кто не в курсе

И вот: http://habrahabr.ru/post/125802/

Тут побольше плюшек описано

[s0rr0w]

Да, у дяди s0rr0w интересная идея, жаль, что далеко не все воспринимают ее

Спасибо, господа, за теплые слова

Я эту идею почти до совершенства довел, даже через гайдлайны все остальные элементы спозиционировал, начиная от таблиц, заканчивая флоатами. Никому в w3c это не интересно.

Оставлю-ка я это сдесь.

Первые потуги

http://lists.w3.org/...10Sep/0097.html

http://lists.w3.org/...10Sep/0243.html

http://lists.w3.org/...10Sep/0280.html

Вторые

http://lists.w3.org/...12Feb/1172.html

Особенно мне нравятся ответы Гуглогуру Таба Эткинса

http://lists.w3.org/...12Feb/1344.html

In my opinion, this is a fool's errand. I don't think it's possible to come up with a single layout model that solves all of the major use-cases that the separate models we currently have can do. I believe the complexity of having several layout models is a worthy cost for the benefit of making it simple and easy to solve problems once you decide with model to use.

Читаем между строк: Я не хочу разбираться во всем этом, лучше оставить все как есть, так мне проще

[Int]

Ну например как сделать вот такую резиновую конструкцию? Чтоб резина была и по высоте и по ширине

А после, как сделать конструкцию, чтобы блоки 1 и 3 были шириной в 200px, а остальные блоки занимали всю оставшуюся ширину?

Вспоминаем цитату с баша про вилларибо и виллабаджо? Или у кого-то такое отвращение к таблицам, что даже если без них придётся писать в 10 раз больше кода, но зато без них?

[nerv]

s0rr0w, можно коротко в чем соль и почему твой способ лучше чем ...? Только объясняй как для неспециалиста

[s0rr0w]

Эволюция схем позиционирования была примерно такой

Вначале был просто поток. Потом в нем появились вкрапления по типу инлайн-блоков, флоатов, инлан-таблиц и так далее. Управление потоком неразрывно связано с позиционированием. Если вы переставляете ноду куда-то в другое место по дереву, это может отражаться на множестве ее характеристик, например она станет визульно меньше по размеру, так как слева стоит float, который нужно обтекать. Переставление ячейки таблицы меняет ее положение. И так далее. Потом появились "проблемы", и разработчики стандартов понемногу начали склоняться к статическому представлению контента на странице. Вот есть блок, он вот тут гвоздиком прибит и это хорошо. Сейчас все больше появляется мест в стандарте, когда физическое местоположение ноды в дереве DOM перестает влиять на отображение. И если для управления местоположением элемента в дом-дереве есть куча методов, то для аналогичного управления, динамически через CSS, потребуется работать с ужасным интерфейсом - style.

Логично предположить, что наиболее выгодным для разработчика будет тот метод позиционирования, который позволяет комбинировать силу DOM-методов и потоковое управление контентом. Добавляем сюда требования к адаптивности, ведь мы не хотим создавать множество медиакверей для разных устройств, потому что это банально дорого. Кто работал с графическими редакторами, тот знает, что там используются направляющие (guidelines), которые помогают в выравнивании контента. И есть такой эффект как прилипание к направляющей, когда край какого-то объекта подносится близко к линии. Берем аналогичное поведение для страницы. Мы разлиновываем контейнеры направляющими и рассказываем блокам, как они должны прилипать к определенным линиям. Если размеры не позволяют прилипнуть, мы можем перескочить к следующей направляющей.

Прилипать можно по разному количеству сторон. Если разлиновать некий бокс вертикальными и горизонтальными направляющими, а потом заставить ячейки прилипнуть ко всем 4-м сторонам, то получим таблицу. Если взять только один элемент и прикрепить его к какой-то одной стороне, то получится флоат. Гриды и флексбоксы делаются путем аналогичного прилипания. Лайнбоксы ни что иное как гайдлайны для инлайн-контента. Выравнивание текста = прилипание к определенному гайдлайну (центрирование тоже можно сделать путем прилипания разных точек, т.е. бокс описывается не 4-мя а 8-ю точками)

Только что я описал базовый механизм позиционирования почти всего в CSS

[Great Rash]

Дал бы ему просто ссылку на статью на хабре, где стопицот минусов наглядно показывают насколько закостенел мозг у большинства web-разработчиков.

Вспоминаем цитату с баша про вилларибо и виллабаджо? Или у кого-то такое отвращение к таблицам, что даже если без них придётся писать в 10 раз больше кода, но зато без них?

Понимаешь, модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время. А в итоге мы будем иметь еще один кастрированный недоинструмент, с синтаксисом, который придумывал какой-то псих.

[Int]

Понимаешь, модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время. А в итоге мы будем иметь еще один кастрированный недоинструмент, с синтаксисом, который придумывал какой-то псих.

Так я и говорю, может быть, просто таблицами сверстать?

[Great Rash]

Таблицами просто и легко, я не спорю и я не фанат семантики. Но мы тут за новые технологии базарим, так что интересно увидеть реализацию именно на них.

[s0rr0w]

Дал бы ему просто ссылку на статью на хабре, где стопицот минусов наглядно показывают насколько закостенел мозг у большинства web-разработчиков.

Он не то, чтобы закостенел. Просто люди не хотят смотреть дальше своего носа. Никому не интересно думать над проблемой и искать способы ее решения

Понимаешь, модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время. А в итоге мы будем иметь еще один кастрированный недоинструмент, с синтаксисом, который придумывал какой-то псих.

Текущую спецификацию пишут программисты. Не веб-разработчики. Поэтому судят все только со своей колокольни - легко или тяжело реализовать. Никому не интересно, что их высер (а по другому тяжело назвать некоторые идеи) не имеет вообще связи с реальностью, что он просто не жизнеспособен еще на моменте идеи.

Взять те же гриды. Это просто ужас, они повторяют таблицы и flex-box'ы. Нахрена они такие красивые нужны?

Edited April 16, 2013 by s0rr0w

[SelenIT]

модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время.

Насколько я понимаю, не совсем. Float-ы изначально были только для врезок (на замену <img align="...">), но их побочные эффекты (напр. создание БКФ) оказались удобны для эмуляции колонок... «и понеслась» ©. А флексбоксы выросли всё-таки из XUL-а (AFAIK, первый синтаксис был буквальной калькой оттуда, display: <XUL-элемент>), т.е. инструмента для частной задачи — автоматической «раскидки» элементов интерфейса (менюшек, кнопок, панелей, тулбаров и т.п.) по сторонам экрана. На панацею, имхо, претендовал (по крайней мере, пытался) Template Layout (aka «вёрстка ASCII-артом»).

[Great Rash]

Т.е., по сути, flex нужен только для раскидывания меню по ширине, так? А как же holy grail layout в примере от Mozilla?

[SelenIT]

Имхо, «грааль» — это тоже своего рода частный случай «раскидки» панелей

[nerv]

s0rr0w, спасибо

[SelenIT]

Похоже, авторам Grid Layout-а стало стыдно, и они решили поменять синтаксис на... по сути, привязку к направляющим

[Great Rash]

Чот я не нашел там свойства repeat, я конечно бегло изучил... а оно одно из самых интересных.

[s0rr0w]

Похоже, авторам Grid Layout-а стало стыдно, и они решили поменять синтаксис на... по сути, привязку к направляющим

Это только мааааленькая часть от того, что действительно могут направляющие. Но, похоже, пора доставать из шухлядки свои наработки, да начинать точить камень нанаово.

Господа, предлагаю следующий план

1. Собрать рабочую группу

2. Открыть проект на том же гитхабе

3. Написать спеку на русском

4. Сделать множество примеров

5. Перевести на английский

6. Закинуть в w3c

Кто со мной?

Чот я не нашел там свойства repeat, я конечно бегло изучил... а оно одно из самых интересных.

http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/#repeat-notation

Да, в целом, можно сказать, что идея дала всходы.

[lexxcode]

Не знаю чем, но готов помочь

[amelice]

Кто со мной?

Я.