Новое предложение в W3C/CSS — Flexible Flow Module

    Все кто профессионально работают с CSS знают что означенный инструмент достаточно беден на предмет layout management. Например в современном CSS (2.1 и 3) технически невозможно воспрозвести все возможности HTML таблиц.

    В 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 можно представлять как пружины имеющие определенный вес.

    Вот для наглядности:
    image

    Параграф на картинке спозиционирован этим вот стилем:
    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
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 20
    • 0
      Круто.
      • 0
        Сначала подумал, что можно сделать margin-right: 20%; margin-left: 40%
        А потом въехал
        • +3
          а этот модуль не решает вашей поблемы?
          dev.w3.org/csswg/css3-grid-layout/
          • 0
            Этот модуль требует написания кучи CSS-кода для того, что можно flex-unit'ами сделать в две строчки. Грубо говоря
          • +2
            А модуль CSS Flexible Box Layout не решает вашу проблему?
            • 0
              Вводит практически ненужные вещи типа flex-align, которые могут быть решены уже существующими свойствами при наличии flex units
              • НЛО прилетело и опубликовало эту надпись здесь
              • +1
                flex-box решает фактически одну единственную проблему — один единственный тип layout manager —
                flex-flow:row. Да и то как-то коряво если честно.

                Например flexbox для ячейки таблицы или элемента списка описать невозможно ибо
                td { display: flexbox; /* ломает оригинальный display:table-cell */ }
                li { display: flexbox; /* display:list-item */ }


              • +2
                Андрей, до статуса рекомендаций это предложение так и не дошло. В чем дело?
                • +1
                  Честно говоря я так и не понял.
                  Из частной переписки с некоторыми Мозиллоидами понял что они бы и рады имплементировать мой вариант вместо 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.
                  • 0
                    Блин. Жесть жесткая, на самом деле :(
                • +6
                  И как успехи в рассмотрении этого предложения?
                  Я просто обратил внимание на дату документа April, 5, 2009
                  Очень интересно было бы послушать от человека, отправляющего предложения в W3C, насколько там кто-то шевелится, как все происходит с новыми предложениями.
                  • 0
                    Т. е. это аналог клея в ТеХе? Очень круто будет, если сделают.
                    • 0
                      Идея очень напоминает layout в Grid Silverlightа, это действительно удобно.
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • +2
                          Ну упомянутый выше CSS Flexible Box Layout фактически вводит новые units через flex() функцию.
                          Еще один упомянутый выше модуль Grid Layout вводит еще одни flex units с именем fraction units.

                          Вообще эта каша с разными layout modules и разными способами описания flexibility в них наводит на грустные мысли по отсутствию царя в голове.
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              CSS Grid Layout и CSS3 Template Layout уже в общем-то объеденены. Теперь это просто CSS Grid Layout.
                              Легче от этого не стало. Вообще все layout managers должны быть под одной крышей и задаваться одним property. Сейчас — каша. Один, например multi-column, задается своим отдельным свойством columns, другие почему-то через display. display вообще нельзя использовать для задания LM т.е. способа раскладки *детей* а не самого элемента по отношению к его соседям.
                              • НЛО прилетело и опубликовало эту надпись здесь

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.