Pull to refresh

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

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

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

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

Оба способа имеют свои достоинства и недостатки, но сегодня я хочу рассказать выравнивании колонок с помощью плагина к 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();
});


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

Три колонки, выровнены по высоте
Центрированный блок с тянущимися полями и рамками
Абсолютно позиционированный блок
Tags:
Hubs:
Total votes 34: ↑27 and ↓7 +20
Views 1.6K
Comments Comments 31