Flexify плагин для выравнивания чего бы то ни было

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

    Мне известны два способа решения этой проблемы:

    — заключить обе колонки в контейнер, и поставить в фон двухцветную картинку;
    — выставить колонкам одновременно вниз отрицательный марджин и положительный паддинг.

    Оба способа имеют свои достоинства и недостатки, но сегодня я хочу рассказать выравнивании колонок с помощью плагина к JQuery — Flexify.

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

    Flexify добавляет к Jquery функции flow() и flex(), после установки необходимых значений, нужно вызвать функцию: $(document).flexify().

    Функция flow в качестве единственного аргумента принимает значения: 'vertical' или 'horizontal', эти значения определяют как именно будут растягиваться дочерние элементы. К примеру, приведенный ниже код, заставит все элементы, содержащиеся в html и body, раскладываться горизонтально:

    $(function () {
    $('html, body').flow('horizontal');
    $(document).flexify();
    });


    Функция flex принимает два аргумента: значение растягивания и коэффициент. Значение растягивания — то что мы собираемся тянуть, например: margin-*, padding-*, border-*, width, height, соответственно для позиционированных элементов: top, right, bottom, и left. Коэффициент растягивания — любое целое число больше 0, обычно 1.

    Для того чтобы выровнять три колонки по высоте достаточно написать:

    $(function () {
    $('#content, #sidebar, #sidebar2').flex('height', 1);
    $(document).flexify();
    });


    Как видно, пользоваться им достаточно просто и удобно. Плагин можно скачать отсюда, а ниже примеры его использования:

    Три колонки, выровнены по высоте
    Центрированный блок с тянущимися полями и рамками
    Абсолютно позиционированный блок
    Поделиться публикацией
    Комментарии 31
      +9
      Однако он очено неприятно моргает и дёргается, особенно в первом примере.
        +1
        Подтверждаю, неприятно тормозит и мерцает.
        +2
        Интересно, но вряд ли пригодится в серьезном проекте.
          +6
          Плагин захватывает, но для таких вещей все-таки есть css (все нужные хаки должны быть известны=))
          Когда я верстал, использовал для колонок это: alistapart.com/articles/multicolumnlayouts
          Сам плагин интересный, но опять-таки, при ресайзе окна не совсем коректно работает=(
            0
            flexify был выбран именно потому что он работает при ресайзе окна, а по поводу css-хаков в чем-то согласна, но например скругленные углы я всегда делаю скриптом (если дизайн позволяет), все-таки это быстро и очень удобно, пока не выйдет css3
              +2
              У меня просто такое мнение что при отключенном js страница должна нормально смотреться (я знаю что js почти всегда включен=)).
              То есть скруглять края у div-ов можно и через js… но нет смысла, так как есть минимум 2 способа для этого:

              1) через 4 маленьких картинки позиционированных абсолютно по углам
              2) используя 4 вложенных div-а, каждый со своей угловой фоновой картинкой

              Вобщем практического смысла в js вместо css я не вижу (есть пару случаев для эмуляции :hover, но речь сейчас не об этом).
                0
                Согласен полностью насчет JS и внешнего вида. Думаю, основная разметка и стили должны быть неизменны как со скриптами, так и без них.
            +2
            О да. Использование js для разметки — это все же перегиб.
              0
              я не спорю, там где можно обойтись css, стараюсь им обходится, просто в этот раз мне не помогли известные способы выранвнивания, поэтому и js
                +1
                css3 когда-нибудь выдет, а вот когда выдет ie понимающий css3, еще не известно. ИМХО юзвери даже к тому времени не перестанут пользоваться ie.
                  0
                  млин как сообщение редактировать?
                  Вообщем хотел сказать, что без js в верстке достаточно не простого макета не обойтись.
                    0
                    полностью согласна
                      0
                      Не согласен.
                      Можно примеры «не простых» макетов?
                        0
                        Я думаю тут дело даже не в сложности, а в удобстве. Те же скругленные уголки, можно сделать без картинок и без скрипта, если расставить десяток блоков до и после закругленного, только это долго и неудобно. Почему бы не использовать для этого одну строчку яваскрипт, особенно если учесть что он сейчас присутствует практически на всех страницах.
                  +1
                  разок использовал… нужно было выровнять по вертикали два дива в блочной верстке…, хорошая штука
                    +2
                    супер, не смотря на все косяки.

                    вот сижу и думаю, кто бы все css3 свойства на JS реализовал?
                      0
                      Насколько я знаю уже есть такое.
                      +3
                      Holy grail Matthew James Taylor — лучшее css, что видел.
                        0
                        спасибо за совет, хорошее решение, буду знать.
                        –1
                        что бы выровнять 3 колонки, нужно потянуть килограми джиквери, а потом ещё килограмы модуля
                        для таких вещей, однако, нужно «хотя бы» стенелоун решение ;)
                        а так «для примера всевозможности» сойдёт ;)
                          0
                          открой папку images после вестки макета и посчитай общий размер файлов, бывает логотип весит больше jquery. В европе не задумываясь страницы по 2 мегабайта делают и нормально.
                          Да и вообще в данном случае не важен вес, важен результат. Можно провозиться два часа с подобным заданием, а можно 2 минуты используя этот плагин. Идеальные решения обычно никто и не обсуждает :)
                            0
                            ну конечно — лучше за 2 минуты сделать абы как и забрать свои денюжки, чем помудиться 2 часа и сделать как положено :)
                              +1
                              у меня уйдет 2 минуты на любой из способов, и никогда не делал работу на «от… бись», вам легче?
                              зы: вообще-то не признаю верстку, которая не может жить без javascvript, но это решение достаточно интреесное, и вес jq здесь не причем.
                              0
                              Это первый раз займёт 2 часа, а дальше уже на автоматизме пару минут ;)
                              вёрстка ДЖСом — уж увольте ;) как бы css & html для этого созданы
                            –2
                              +1
                              есть сэр! я говно сэр!
                                0
                                способы, предложенные Иваном Сагалаевым я перечислила в топике, и если вам интересно то они в моем случае не подошли
                                +1
                                интересно смотрится без ява-скриптов.
                                хотя как вспогательный механизм можно использовать.
                                  +1
                                  Думаю, у любого верстальщика цель — сделать все при минимальном использовании js.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Знаете, существует куча способов нормально сверстать то, что вы предлагаете вытягивать яваскриптом. Это не очень хорошо

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

                                    Самое читаемое