В Java/AWT/Swing например с самого начала были заложены всяко разны Layout Managers. В CSS такого в чистом виде нет. Непорядок.
Собственно это и явилось причиной нашего предложения в W3C CSS WG.
Идея проста «как двери»:
1) Вводим один CSS атрибут 'flow' и
2) Единицы измерения — flex.
'flow' принимает значения:
horizontal | vertical | horizontal-flow | vertical-flow | "template"и описывает разные способы размещения блоков внутри контейнера сиречь описывает layout manager.
flex units это веса распределения свободного места в контейнере. Записывются как <число> '*', например:
margin-left:2*. Для наглядности flex length units можно представлять как пружины имеющие определенный вес.
Вот для наглядности:
Параграф на картинке спозиционирован этим вот стилем:
p
{
width: 40%; /* fixed width - 40% of width of the container */
margin-left: 2*; /* left "spring" of power 2 */
margin-right: 1*; /* right "spring" of power 1 */
border:1px solid black; /* border of fixed width */
}
Те кто знает что скажем обозначает запись в HTML [frameset cols=«200,*,*»] я думаю сразу «въедут» в идею флексов.
По поводу идеи 'flow' атрибута и его значений рекомендую пробежаться хотя бы по иллюстрациям в тексте самого proposal: www.terrainformatica.com/w3/flex-layout/flex-layout.htm
Вот такие новости с фронтов CSS3 и HTML5
Комментарии (19)
neTpyceB
21.03.2012 06:59Сначала подумал, что можно сделать margin-right: 20%; margin-left: 40%
А потом въехал
XaocCPS
21.03.2012 06:59а этот модуль не решает вашей поблемы?
dev.w3.org/csswg/css3-grid-layout/
dmitriid
21.03.2012 06:59Этот модуль требует написания кучи CSS-кода для того, что можно flex-unit'ами сделать в две строчки. Грубо говоря
Mithgol
21.03.2012 06:59А модуль CSS Flexible Box Layout не решает вашу проблему?
dmitriid
21.03.2012 06:59Вводит практически ненужные вещи типа
flex-align, которые могут быть решены уже существующими свойствами при наличии flex units
anonymous
21.03.2012 06:59
csmile Автор
21.03.2012 06:59flex-box решает фактически одну единственную проблему — один единственный тип layout manager —
flex-flow:row. Да и то как-то коряво если честно.
Например flexbox для ячейки таблицы или элемента списка описать невозможно ибо
td { display: flexbox; /* ломает оригинальный display:table-cell */ }
li { display: flexbox; /* display:list-item */ }
dmitriid
21.03.2012 06:59Андрей, до статуса рекомендаций это предложение так и не дошло. В чем дело?
csmile Автор
21.03.2012 06:59Честно говоря я так и не понял.
Из частной переписки с некоторыми Мозиллоидами понял что они бы и рады имплементировать мой вариант вместо CSS Flexible Box Layout но по всей видимости какие-то политические или финансовые мотивы не дают им это сделать. Кстати люди из Мозиллы и Оперы в обсуждении этого модуля практически не участвуют. В основном Tab Atkins из Google и Алекс Могилевский из Microsoft.
CSS Flexible Box Layout это в общем-то их старая фича по имени XUL flexes ( и ) которая решала flexibility c помощью специального markup. Попытка перенести этот подход механически в CSS ничего хорошего не дает и не даст. Собcтсвенно тот же подход (и я думаю та же судьба ожидается) что и с попыткой CSS-лизации механизма s. HTML таблицы имеют нужную «резиновость» (в горизонтальном и вертикальном направлении) но их CSS эквивалент (display:table & friends) уже потерял flexibility.dmitriid
21.03.2012 06:59Блин. Жесть жесткая, на самом деле :(
csmile Автор
21.03.2012 06:59CSS Grid Layout и CSS3 Template Layout уже в общем-то объеденены. Теперь это просто CSS Grid Layout.
Легче от этого не стало. Вообще все layout managers должны быть под одной крышей и задаваться одним property. Сейчас — каша. Один, например multi-column, задается своим отдельным свойством columns, другие почему-то через display. display вообще нельзя использовать для задания LM т.е. способа раскладки *детей* а не самого элемента по отношению к его соседям.
nayjest
21.03.2012 06:59И как успехи в рассмотрении этого предложения?
Я просто обратил внимание на дату документа April, 5, 2009
Очень интересно было бы послушать от человека, отправляющего предложения в W3C, насколько там кто-то шевелится, как все происходит с новыми предложениями.
anonymous
21.03.2012 06:59csmile Автор
21.03.2012 06:59Ну упомянутый выше CSS Flexible Box Layout фактически вводит новые units через flex() функцию.
Еще один упомянутый выше модуль Grid Layout вводит еще одни flex units с именем fraction units.
Вообще эта каша с разными layout modules и разными способами описания flexibility в них наводит на грустные мысли по отсутствию царя в голове.
mktums
Круто.