Компонент Flex

Используйте огромные возможности flexbox при создании потрясающих отзывчивых макетов. Как создать разметку. Документация. Примеры.

Компонент Flex играет важную роль в построении макетов в фреймворке UIkit 3. Многие из компонентов, например, Grid а также горизонтальные навигации, такие как Панель навигации, Суб-навигация, Навигационная цепочка, Пагинация, Таб и Точечная навигация построены с помощью Flexbox и могут быть использованы вместе с дополнительными классами данного компонента.

Создание разметки

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

Класс Описание
.uk-flex Создаётся гибкий контейнер и ведёт себя как блочный элемент.
.uk-flex-inline Создаётся гибкий контейнер и ведёт себя как встроенный элемент. 
<div class="uk-flex">
    <div></div>
</div>

В данном примере для стилизации блоков с контентом использовались классы из компонента Карточка : Card.

Эл. 1
Эл. 2
Эл. 3
<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body">Эл. 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Эл. 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Эл. 3</div>
</div>

Горизонтальное выравнивание

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

По умолчанию flex-элементы выровнены по левому краю, как и класс .uk-flex-left.

Класс Описание
.uk-flex-left Добавьте этот класс, чтобы выровнять flex-элементы по левому краю.
.uk-flex-center Добавьте этот класс для центрирования гибких элементов вдоль главной оси.
.uk-flex-right Добавьте этот класс, чтобы выровнять flex-элементы по правому краю.
.uk-flex-between Добавьте этот класс для равномерного распределения элементов с равным пространством между элементами вдоль главной оси;
первый элемент в начале и последний элемент в конце главной оси.
.uk-flex-around Добавьте этот класс для равномерного распределения элементов с равным пространством по обеим сторонам каждого предмета. 
<div class="uk-flex uk-flex-center">
    <div></div>
</div>
uk-
-flex-
-center
uk-
-flex-
-between
uk-
-flex-
-around
<div class="uk-flex uk-flex-center">
    <div class="uk-card uk-card-default uk-card-body">uk-</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">-flex-</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left"><em>-center</em></div>
</div>

<hr class="uk-margin-medium">

<div class="uk-flex uk-flex-between">
    <div class="uk-card uk-card-default uk-card-body">uk-</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">-flex-</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left"><em>-between</em></div>
</div>

<hr class="uk-margin-medium">

<div class="uk-flex uk-flex-around">
    <div class="uk-card uk-card-default uk-card-body">uk-</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">-flex-</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left"><em>-around</em></div>
</div>

Отзывчивость X

Фреймворк UIkit 3 предоставляет несколько полезных отзывчивых классов для горизонтального выравнивания. По сути, они работают так же, как и обычные классы горизонтального выравнивания Flex, за исключением того, что у них есть суффиксы, которые предоставляют точку останова, с которой они вступают в силу.

Класс Описание
.uk-flex-left@s
.uk-flex-center@s
.uk-flex-right@s
.uk-flex-between@s
.uk-flex-around@s 		Влияет только на ширину устройства от 640px и выше.
.uk-flex-left@m
.uk-flex-center@m
.uk-flex-right@m
.uk-flex-between@m
.uk-flex-around@m 		Влияет только на ширину устройства от 960px и выше.
.uk-flex-left@l
.uk-flex-center@l
.uk-flex-right@l
.uk-flex-between@l
.uk-flex-around@l 		Влияет только на ширину устройства 1200px и выше.
.uk-flex-left@xl
.uk-flex-center@xl
.uk-flex-right@xl
.uk-flex-between@xl
.uk-flex-around@xl 		Влияет только на ширину устройства 1600px и выше.

Пример

<div class="uk-flex uk-flex-center@m uk-flex-right@l uk-flex-around@xl">
    <div></div>
</div>
Эл. 1
Эл. 2
Эл. 3
<div class="uk-flex uk-flex-center@m uk-flex-right@l uk-flex-around@xl">
    <div class="uk-card uk-card-default uk-card-body">Эл. 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Эл. 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Эл. 3</div>
</div>

Вертикальное выравнивание

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

Класс Описание
.uk-flex-stretch Добавьте этот класс-модификатор, чтобы заполнить высоту их родительского элемента.
.uk-flex-top Добавьте этот класс, чтобы выровнять flex-элементы по верху.
.uk-flex-middle Добавьте этот класс для центрирования flex-элементов вдоль поперечной оси.
.uk-flex-bottom Добавьте этот класс, чтобы выровнять flex-элементы по нижнему краю. 
<div class="uk-flex uk-flex-middle"></div>

Примеры

uk-
-flex-
...
-middle
...
...
uk-
-flex-
...
-stretch
...
...
<div class="uk-flex uk-flex-middle uk-text-center">
   <div class="uk-card uk-card-default uk-card-body">uk-</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-left">-flex-<br>...</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-left"><em>-middle</em><br>...<br>...</div>
</div>

<hr class="uk-margin-medium">

<div class="uk-flex uk-flex-stretch uk-text-center">
   <div class="uk-card uk-card-default uk-card-body">uk-</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-left">-flex-<br>...</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-left"><em>-stretch</em><br>...<br>...</div>
</div>

Отзывчивость Y

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

Класс Описание
.uk-flex-stretch@s
.uk-flex-top@s
.uk-flex-middle@s
.uk-flex-bottom@s
 Влияет только на ширину устройства от 640px и выше.
.uk-flex-stretch@m
.uk-flex-top@m
.uk-flex-middle@m
.uk-flex-bottom@m
 Влияет только на ширину устройства от 960px и выше.
.uk-flex-stretch@l
.uk-flex-top@l
.uk-flex-middle@l
.uk-flex-bottom@l
 Влияет только на ширину устройства 1200px и выше.
.uk-flex-stretch@xl
.uk-flex-top@xl
.uk-flex-middle@xl
.uk-flex-bottom@xl
 Влияет только на ширину устройства 1600px и выше.

Модификаторы направления

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

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

Примеры

uk-
-flex-
-column
uk-
-flex-
-row-reverse
<div class="uk-flex uk-flex-column uk-width-1-2">
   <div class="uk-card uk-card-default uk-card-body">uk-</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-top">-flex-</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-top"><em>-column</em></div>
</div>

<hr class="uk-margin-medium">

<div class="uk-flex uk-flex-row-reverse uk-width-1-1">
   <div class="uk-card uk-card-default uk-card-body uk-margin-left">uk-</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-left">-flex-</div>
   <div class="uk-card uk-card-default uk-card-body"><em>-row-reverse</em></div>
</div>

Отзывчивость row & column

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

Класс Описание
.uk-flex-row@s
.uk-flex-column@s 		Влияет только на ширину устройства от 640px и выше.
.uk-flex-row@m
.uk-flex-column@m 		Влияет только на ширину устройства от 960px и выше.
.uk-flex-row@l
.uk-flex-column@l 		Влияет только на ширину устройства 1200px и выше.
.uk-flex-row@xl
.uk-flex-column@xl 		Влияет только на ширину устройства 1600px и выше. 
<div class="uk-flex uk-flex-column@l"></div>

Модификаторы «Wrap»

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

Класс Описание
.uk-flex-wrap Добавьте этот класс, чтобы переносить элементы на другую строку, когда они больше не помещаются в свой контейнер.
.uk-flex-wrap-reverse Добавьте этот класс, чтобы изменить направление элементов так, чтобы они распологались справа налево.
Порядок отображаения элементов сохраняется, однако начало и конец строки поменяются местами.
.uk-flex-nowrap Добавьте этот класс, чтобы объединить и выстроить flex-элементы в одной строке, без переноса на следующую. Это поведение по умолчанию.

Следующие классы модифицируют выравнивание многострочных flex-элементов.

Класс Описание
.uk-flex-wrap-stretch Добавьте этот класс, чтобы строки равномерно растягивались, заполняя всё свободное пространство.
.uk-flex-wrap-between Добавьте этот класс для равномерного распределения строк элементов, от начала первой верхней строки до конца последней строки контейнера с одинаковым расстоянием между ними.
.uk-flex-wrap-around Добавьте этот класс, чтобы равномерно распределить строки с равным пространством между двумя соседними строками. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
.uk-flex-wrap-top Добавьте этот класс для выравнивания многострочных флекс-элементов по верху. Строки располагаются в начале поперечной оси.
.uk-flex-wrap-middle Добавьте этот класс для вертикального центрирования многострочных флекс-элементов. Строки располагаются по центру контейнера.
.uk-flex-wrap-bottom Добавьте этот класс, чтобы выровнять многострочные флекс-элементы снизу. Строки располагаются начиная с конца поперечной оси. 
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around"></div>
Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around uk-background-muted uk-height-large">
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Элемент 1</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Элемент 2</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Элемент 3</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Элемент 4</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small">Элемент 5</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Элемент 6</div>
</div>

Очередность

Порядок элементов. Сортировка

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

Класс Описание
.uk-flex-first Отображает элемент как первый.
.uk-flex-last Отображает элемент последним.
.uk-flex-first@s
.uk-flex-last@s		 Влияет на ширину устройства от 640px и более.
.uk-flex-first@m
.uk-flex-last@m		 Влияет на ширину устройства от 960px и более.
.uk-flex-first@l
.uk-flex-last@l		 Влияет на ширину устройства от 1200px и выше.
.uk-flex-first@xl
.uk-flex-last@xl		 Влияет на ширину устройства от 1600px и выше. 
<div class="uk-flex">
  <div></div>
  <div class="uk-flex-first"></div>
</div>
Для сортировки элементов с помощью перетаскивания обратите внимание на компонент Сортируемые элементы
Блок 1
Блок 2
Блок 3
<div class="uk-flex">
   <div class="uk-card uk-card-default uk-card-body uk-flex-last uk-margin-left">Блок 1</div>
   <div class="uk-card uk-card-default uk-card-body uk-flex-first">Блок 2</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-left">Блок 3</div>
</div>

Занимаемое пространство

Габариты элемента

Чтобы определить, сколько места должен занимать flex-элемент, добавьте к нему один из следующих классов. По умолчанию элементы определяют размер по своему содержимому, но им позволено сжиматься, "Ёу".

Класс Описание
.uk-flex-initial Размер коробки определяется ее содержимым, но уменьшается.
.uk-flex-none Размер коробки определяется ее содержимым.
.uk-flex-auto Пространство выделяется с учетом содержимого элемента.
.uk-flex-1 Пространство выделяется исключительно на основе flex.
1
Блок 2
3
Блок 4
5
1
Блок 2
3
Блок 4
5
<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body uk-flex-none">1</div>
    <div class="uk-card uk-card-default uk-card-body uk-flex-1 uk-visible@s">Блок 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-width-1-3">3</div>
    <div class="uk-card uk-card-default uk-card-body uk-visible@s">Блок 4</div>
    <div class="uk-card uk-card-default uk-card-body ">5</div>
</div>

<hr class="uk-margin-medium">

<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body uk-flex-1">1</div>
    <div class="uk-card uk-card-default uk-card-body uk-flex-none uk-visible@s">Блок 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-width-1-3">3</div>
    <div class="uk-card uk-card-default uk-card-body uk-visible@s">Блок 4</div>
    <div class="uk-card uk-card-default uk-card-body ">5</div>
</div>
Отзывчивость и Габариты
Класс Описание
.uk-flex-initial@s
.uk-flex-none@s
.uk-flex-1@s 		Влияет только на ширину устройства от 640px и выше.
.uk-flex-initial@m
.uk-flex-none@m
.uk-flex-1@m 		Влияет только на ширину устройства от 960px и выше.
.uk-flex-initial@l
.uk-flex-none@l
.uk-flex-1@l 		Влияет только на ширину устройства 1200px и выше.
.uk-flex-initial@xl
.uk-flex-none@xl
.uk-flex-1@xl 		Влияет только на ширину устройства 1600px и выше.

Flex и Grid

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

Маленькие хитрости. Вкус соли можно заметно улучшить, если положить ее на краю стаканчика с текилой.

Image 
<div class="uk-flex-middle" uk-grid>
    <div class="uk-width-2-3@m">
        <p>Маленькие хитрости. Вкус соли можно заметно улучшить, если положить ее на краю стаканчика с текилой.</p>
    </div>
    <div class="uk-width-1-3@m uk-flex-first">
        <img src="images/light.webp" width="450" height="300" alt="Image" loading="lazy">
    </div>
</div>