Флекс
Используйте возможности адаптируемого блока, чтобы создать широкий диапазон разметки.
Этот компонент использует технологию гибких блоков, концепция которой еще довольно новая, но чрезвычайно мощная для создания разметки.
Использование
Для установки этого компонента, просто добавьте .uk-flex класс <div> элементу. Это позволит создать гибкий контейнер. По умолчанию, все гибкие элементы будут выровнены по левому краю и равномерно сопоставлены по высоте и ширине.
Пример
Разметки
<div class="uk-flex">
<div>...</div>
</div>Гибкий встроенный
По умолчанию, гибкий контейнер отображается как блочный элемент. Чтобы применить поведение встроенных элементов при этом еще выложив ее содержимое согласно спецификации flexbox модель, используйте .uk-flex-inline класс вместо uk-flex.
Модификаторы
Вы можете добавить несколько различных классов модифицировать гибкого поведения.
Выравнивание
Эти классы определяют горизонтальное и вертикальное выравнивание элементов гибкого контейнера и распределяют место между ними.
| Класс | Описание |
|---|---|
.uk-flex-center |
Добавить этот класс для центровки flex элементов по горизонтали. |
.uk-flex-right |
Добавить этот класс, чтобы выровнять flex элементы справа. |
.uk-flex-top |
Добавить этот класс, чтобы выровнять flex элементы сверху. |
.uk-flex-middle |
Добавьте этот класс для выравнивания flex элементов вертикально по центру. |
.uk-flex-bottom |
Добавить этот класс, чтобы выровнять flex элементы по нижнему краю. |
.uk-flex-space-between |
Добавить этот класс, чтобы распространить элементы равномерно, с первого пункта на начало и последний пункт на конце главной оси. |
.uk-flex-space-around |
Добавить этот класс, чтобы равномерно распределить элементы с равными пробелами с двух сторон каждого элемента. |
Пример
Разметки
<div class="uk-flex uk-flex-middle uk-flex-space-between">...</div>Направление
Эти классы определяют оси гибкого контейнера и блоки, расположенные в нем. По умолчанию элементы расположены горизонтально, слева направо.
| Класс | Описание |
|---|---|
.uk-flex-row-reverse |
Добавить этот класс, чтобы выложить flex элементы справа налево. |
.uk-flex-column |
Добавить этот класс выложить Флекс элементы в виде вертикальных столбцов. |
.uk-flex-column-reverse |
Добавить этот класс, чтобы выложить flex элементы в обратном порядке, снизу вверх. |
Пример
Разметки
<div class="uk-flex uk-flex-column uk-flex-column-reverse">...</div>Обертывание
По умолчанию Flex предметы будут укладываться в одну строку. Добавить .uk-flex-wrap класс, так, что элементы обруча в другой ряд, когда они уже не вписываются в видовом экране. Чтобы изменить элементы' направлении так, что они бегут справа налево, добавьте .uk-flex-wrap-reverse класса. Следующие классы изменить выравнивание для упаковки сгибать предметы. Чтобы заставить сгибать предметы в один ряд, просто добавьте .uk-flex-nowrap класс.
| Класс | Описание |
|---|---|
.uk-flex-wrap-top |
Добавить этот класс, чтобы выровнять многострочные элементы гибкого трубопровода к верхней. |
.uk-flex-wrap-middle |
Добавьте этот класс к вертикально центра многострочные сгибать предметы. |
.uk-flex-wrap-bottom |
Добавить этот класс, чтобы выровнять многострочный сгибать предметы на дно. |
.uk-flex-wrap-space-between |
Добавить этот класс, чтобы распространить товар рядами равномерно, с первого ряда в верхней и последней строки в нижней части контейнера. |
.uk-flex-wrap-space-around |
Добавить этот класс, чтобы распределить строки равномерно с равными пространство в верхней и нижней части каждой строки. |
Пример
Разметки
<div class="uk-flex uk-flex-wrap uk-flex-wrap-reverse uk-flex-wrap-space-around">...</div>Пункт заказа
По умолчанию Flex предметы выкладываются по словам источника заказа. Для отображения определенного элемента в качестве первого или последнего, просто добавить один из этих классов.
| Класс | Описание |
|---|---|
.uk-flex-order-first |
Отображает элемент, как и первый. |
.uk-flex-order-last |
Отображает элемент, как в прошлый раз. |
.uk-flex-order-first-small.uk-flex-order-last-small |
Влияет устройств шириной от 480px и выше. |
.uk-flex-order-first-medium.uk-flex-order-last-medium |
Влияет устройств шириной от 768px и выше. |
.uk-flex-order-first-large.uk-flex-order-last-large |
Влияет устройств шириной от 960px и выше. |
.uk-flex-order-first-xlarge.uk-flex-order-last-xlarge |
Влияет устройств шириной от 1220px и выше. |
Пример
Разметки
<div class="uk-flex">
<div class="uk-flex-order-first">...</div>
</div>Размеры
Чтобы определить, сколько места изгиба элемента следует добавить один из следующих классов для элемента.
| Класс | Описание |
|---|---|
.uk-flex-item-none |
Размер коробки определяется ее содержимым. |
.uk-flex-item-auto |
Пространство распределяется с учетом элемента содержание. |
.uk-flex-item-1 |
Пространство выделяется исключительно на основе гибкого трубопровода. |
Flex и грид
Компонент Flex могут быть объединены с грид от Грид компонент.
Пример
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
