Flex

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

Компонент Flex использует Flexbox - технологию, которая чрезвычайно эффективная. Данный компонент обладает широкими возможностями при создании отзывчивых макетов, имеет широкую поддержку браузеров. Flexbox значительно облегчит нам работу, он решает сложные задачи, которые невозможно сделать традиционными методами CSS.


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

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

Пример

Блок
Блок
Блок

Разметка

<div class="uk-flex">
    <div>...</div>
    ...
</div>

Flex inline

Чтобы применить поведение встроенного элемента, в то же время используя его содержимое в соответствии с flexbox, добавьте класс .uk-flex-inline вместо uk-flex.

Пример

div
div
div

Разметка

<div class="uk-flex-inline">
    <div>...</div>
    ...
</div>

Модификаторы

Вы можете добавить несколько различных классов, чтобы изменить поведение flex.

Выравнивание

Эти классы определяют горизонтальное и вертикальное выравнивание гибких элементов и распределяют пространство между ними.

Класс Описание
.uk-flex-center Добавьте этот класс для выравнивания элементов по центру (по горизонтали).
Значение justify-content установлено center
Пример (flex-center)
.uk-flex-right Добавьте этот класс, чтобы выровнять flex-элементы по правому краю.
Значение justify-content установлено flex-end
Пример (flex-right)
.uk-flex-top Добавьте этот класс, чтобы выровнять flex-элементы по верхнему краю.
Значение align-items установлено flex-start
.uk-flex-middle Добавьте этот класс, чтобы выровнять flex-элементы по вертикали.
Значение align-items установлено center
Пример (flex-middle-space-between)
.uk-flex-bottom Добавьте этот класс, чтобы выровнять flex-элементы по нижнему краю.
Значение align-items установлено flex-end
Пример (flex-right-bottom)
.uk-flex-space-between Добавьте этот класс для равномерного распределения элементов, с первым элементом в начале и последним элементом в конце главной оси.
Значение align-content установлено space-between
Пример (flex-middle-space-between)
.uk-flex-space-around Добавьте этот класс для равномерного распределения с равным пространством по обеим сторонам каждого элемента.
Значение justify-content установлено space-around
Пример (flex-space-around)

Пример (flex-center)

А
А
А

Разметка

<div class="uk-flex uk-flex-center">
    ...
</div>

Пример (flex-right)

Б
Б
Б

Разметка

<div class="uk-flex uk-flex-right">
    ...
</div>

Пример (flex-middle-space-between)

В
В
В

Разметка

<div class="uk-flex uk-flex-middle uk-flex-space-between">
    ...
</div>

Пример (flex-space-around)

Г
Г
Г

Разметка

<div class="uk-flex uk-flex-space-around">
    ...
</div>

Пример (flex-right-bottom)

Д
Д
Д

Разметка

<div class="uk-flex uk-flex-right uk-flex-bottom">
    ...
</div>

Направление

По умолчанию элементы располагаются горизонтально слева направо. Вы можете легко изменить положение элементов. Эти классы определяют размещаемые по оси Flex-элементы и их направление.

Класс Описание
.uk-flex-row-reverse Добавьте этот класс, чтобы расположить гибкие элементы справа налево.
Пример (flex-row-reverse)
.uk-flex-column Добавьте этот класс, чтобы отобразить гибкие элементы в виде вертикальных столбцов.
Пример (flex-column)
.uk-flex-column-reverse Добавьте этот класс, чтобы расположить гибкие элементы снизу вверх.
Пример (flex-column-reverse)

Пример (flex-row-reverse)

1
2
3

Разметка

<div class="uk-flex uk-flex-row-reverse">
    ...
</div>

Пример (flex-column)

1
2
3

Разметка

<div class="uk-flex uk-flex-column">
    ...
</div>

Пример (flex-column-reverse)

1
2
3

Разметка

<div class="uk-flex uk-flex-column-reverse">
    ...
</div>

Wrap

По умолчанию гибкие элементы размешаются в один ряд Пример (flex).

Добавьте класс .uk-flex-wrap, чтобы элементы переносились в нижний ряд, когда они больше не соответствуют области просмотра Пример (flex-wrap).
Чтобы изменить направление элементов так, чтобы они проходили справа налево, добавьте класс .uk-flex-wrap-reverse Пример (flex-wrap-reverse).

Следующие классы UIkit 2 модифицируют выравнивание обертывающих элементов flex. Чтобы поместить элементы flex в один ряд, просто добавьте класс .uk-flex-nowrap class.

Класс Описание
.uk-flex-wrap-top Добавьте этот класс, чтобы выровнять многорядные гибкие элементы по верху.
Пример (flex-wrap-top)
.uk-flex-wrap-middle Добавьте этот класс для вертикального центрирования многорядных гибких элементов.
Пример (flex-wrap-middle)
.uk-flex-wrap-bottom Добавьте этот класс, чтобы выровнять многострочные флекс-элементы снизу.
Пример (flex-wrap-bottom)
.uk-flex-wrap-space-between Добавьте этот класс для равномерного распределения строк элементов, с первой строкой сверху и последней строкой снизу контейнера.
Пример (flex-wrap-space-between)
.uk-flex-wrap-space-around Добавьте этот класс для равномерного распределения строк с равным пространством сверху и снизу каждой строки.
Пример (flex-wrap-reverse-space-around)

Пример (flex)

1
2
3
4
5
6

Разметка

<div class="uk-flex">
    <div class="uk-width-1-3">1</div>
    <div class="uk-width-1-3">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="uk-width-1-3">4</div>
    <div class="uk-width-1-3">5</div>
    <div class="uk-width-1-3">6</div>
</div>

Пример (flex-wrap)

1
2
3
4
5
6

Разметка

<div class="uk-flex uk-flex-wrap">
    <div class="uk-width-1-3">1</div>
    <div class="uk-width-1-3">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="uk-width-1-3">4</div>
    <div class="uk-width-1-3">5</div>
    <div class="uk-width-1-3">6</div>
</div>

Пример (flex-wrap-top)

1
2
3
4
5
6

Разметка

<div class="uk-flex flex-wrap-top">
    <div class="uk-width-1-3">1</div>
    <div class="uk-width-1-3">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="uk-width-1-3">4</div>
    <div class="uk-width-1-3">5</div>
    <div class="uk-width-1-3">6</div>
</div>

Пример (flex-wrap-reverse)

1
2
3
4
5
6

Разметка

<div class="uk-flex uk-flex-wrap-reverse">
    <div class="uk-width-1-3">1</div>
    <div class="uk-width-1-3">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="uk-width-1-3">4</div>
    <div class="uk-width-1-3">5</div>
    <div class="uk-width-1-3">6</div>
</div>

Пример (flex-wrap-middle)

Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6

Разметка

<div class="uk-flex uk-flex-wrap uk-flex-wrap-middle">
    <div class="uk-width-1-3">1</div>
    <div class="uk-width-1-3">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="uk-width-1-3">4</div>
    <div class="uk-width-1-3">5</div>
    <div class="uk-width-1-3">6</div>
</div>

Пример (flex-wrap-bottom)

1
2
3
4
5
6

Разметка

<div class="uk-flex uk-flex-wrap uk-flex-wrap-bottom">
    <div class="uk-width-1-3">1</div>
    <div class="uk-width-1-3">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="uk-width-1-3">4</div>
    <div class="uk-width-1-3">5</div>
    <div class="uk-width-1-3">6</div>
</div>

Пример (flex-wrap-space-between)

Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6

Разметка

<div class="uk-flex uk-flex-wrap uk-flex-wrap-space-between">
    ...
</div>

Пример (flex-wrap-reverse-space-around)

1
2
3
4
5
6

Разметка

<div class="uk-flex uk-flex-wrap-reverse uk-flex-wrap-space-around">
    ...
</div>

Сортировка элементов

По умолчанию гибкие элементы располагаются по порядку. Чтобы отобразить определенный элемент первым или последним, добавьте один из этих классов.

Класс Описание
.uk-flex-order-first Отображает элемент первым.
Пример (flex-order-first)
.uk-flex-order-last Отображает элемент последним.
Пример (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 и выше.

Пример (flex-order-first)

1
Блок 2
3

Разметка

<div class="uk-flex">
    <div>1</div>
    <div class="uk-flex-order-first">2</div>
    <div>3</div>
</div>

Пример (flex-order-last)

1
Блок 2
3

Разметка

<div class="uk-flex">
    <div>1</div>
    <div class="uk-flex-order-last">2</div>
    <div>3</div>
</div>

Размеры

Чтобы определить, сколько места должен занимать гибкий элемент, добавьте к нему один из следующих классов.

Класс Описание
.uk-flex-item-none Размер коробки определяется ее содержимым.
Пример (flex-item-none)
.uk-flex-item-auto Пространство выделяется с учетом содержимого элемента.
Пример (flex-item-auto)
.uk-flex-item-1 Пространство выделяется исключительно на основе flex.
Пример (flex-item-1)

Пример (flex-item-none)

1
2
3
4
5

Разметка

<div class="uk-flex">
    <div class="uk-flex-item-none">1</div>
    <div class="uk-flex-item-none">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="">4</div>
    <div class="">5</div>
</div>

Пример (flex-item-auto)

1
2
3
4
5

Разметка

<div class="uk-flex">
    <div class="uk-flex-item-auto">1</div>
    <div class="uk-flex-item-auto">2</div>
    <div class="uk-width-1-3">3</div>
    <div class="">4</div>
    <div class="">5</div>
</div>

Пример (flex-item-1)

1
2
3
4
5

Разметка

<div class="uk-flex">
    <div class="uk-flex-item-1">1</div>
    <div class="uk-flex-item-1">2</div>
    <div class="uk-width-1-3 ">3</div>
    <div class="">4</div>
    <div class="">5</div>
</div>

Flex и Grid

Компонент Flex можно комбинировать с сеткой из компонента Grid.

Пример

Placeholder

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

Разметка

<div class="uk-grid uk-flex-middle" data-uk-grid-margin>
    <div class="uk-width-medium-1-3">
        ...
    </div>
    <div class="uk-width-medium-2-3">
        ...
    </div>
</div>