Флекс

Используйте возможности адаптируемого блока, чтобы создать широкий диапазон разметки.

Этот компонент использует адаптируемого блока, концепция, которая еще довольно новая, но чрезвычайно мощный для создания разметки.


Использование

Для установки этого компонента, просто добавьте .uk-flex класс <div> элементу. Это позволит создать гибкий контейнер. По умолчанию, все гибкие элементы будут выровнены по левому краю и равномерно сопоставить по высоте и ширине.

Пример

Box
Box
Box

Разметки

<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 Добавить этот класс, чтобы равномерно распределить элементы с равными пробелами с двух сторон каждого элемента.

Пример

Box
Box
Box

Разметки

<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 элементы в обратном порядке, снизу вверх.

Пример

1
2
3

Разметки

<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 Добавить этот класс, чтобы распределить строки равномерно с равными пространство в верхней и нижней части каждой строки.

Пример

1
2
3
4
5
6

Разметки

<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 и выше.

Пример

1
2
3

Разметки

<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 могут быть объединены с грид от Грид компонент.

Пример

Placeholder

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.