unera/flex

flex layout с квантами

Набор классов для работы сеткой на мобильных устройствах

Сетка

.flex

Обозначает что данный класс является контейнером сетки раметки. При объявлении данного контейнера надо так же указать гравитацию в соответствии с которой будут распологаться дочерние элементы.

виды гравитации

• .top, .bottom, .left, .right - по сторонам экрана
• .po-top, .lo-top, .po-bottom, .lo-bottom, .po-left, .lo-left, .po-right, .lo-right - по сторонам экрана в ориентации портрет или ландшафт

Многострочность

• .eflex - дополнительный класс, включающий многострочность

При многострочности дочерние элементы не занимают всю ширину при вертикальной гравитации или всю высоту при горизонтальной гравитации. Метод переноса строк определяется дополнительными классами:

• .forward - обычный режим
• .backward - обратный режим

Размеры дочерних элементов

Квантуются (по умолчанию 24) и могут устанавливаться в количестве квантов в зависимости от ориентации:

• .size-2 - 2/24
• .po-size-3 - 3/24 в портретной ориентации

Классы дочерних элементов

• size-{0-24} - размер элемента в квантах от размера контейнера
• po-size-{0-24} - размер элемента при портретной ориентации
• lo-size-{0-24} - размер элемента при ландшафтной ориентации
• grow-{0-24} - 0 - запрещает автовырастать элементу а цифры 1-24 указывают на жадность
• `shrink-{0-24} - 0 - запрещает автоужиматься элементу, а цифры 1-24 указывают на жадность

Вспомогательные классы общего назначения

.fill

Объект имеющий этот класс заполняет родителя на 100% (width=height=100%)

.h-fill и .w-fill

Заполнение родителя по высоте и ширине на 100%

.landscape и .portrait

Отображается только в определенном режиме.

.child-center, .child-vcenter, .child-vtop, .child-vbottom

Позиционирует свои дочерние элементы соответственно

.overflow-y, .overflow-x

Включает прокрутку дочерних элементов по заданной оси.