Компонент Flex

Используйте всю мощь flexbox для создания самых сложных шаблонов.

Компонет UIkit flex

Компонент Flex играет важную роль в UIkit, начиная с версии 2. Многие компоненты, например, Grid, а также Навигационные панели, Субнавигация, Хлебные крошки, Пагинация, Вкладки и Точечная навигация основаны на flexbox и могут использоваться вместе с классами утилит из этого компонента.

Как использовать компонент Flex в UIkit 3. Используем FlexBox правильно.

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

Класс Описание
.uk-flex Flex контейнер и ведет себя как блочный элемент.
.uk-flex-inline Flex контейнер и ведет себя как встроенный элемент. 
<div class="uk-flex">
    <div></div>
</div>
  • Элемент 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>
  • Элемент 1
    Элемент 2
    Элемент 3
  • <div class="uk-flex uk-flex-center">
    <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>

Адаптивность

UIkit предоставляет несколько адаптивных классов для горизонтального выравнивания. Они работают так же, как обычные классы выравнивания 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		 Работает на устройствах с разрешением of 1600px и более. 
<div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div></div>
</div>
  • Элемент 1
    Элемент 2
    Элемент 3
  • <div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <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 Добавьте этот класс для расширения flex элементов, чтобы заполнить высоту их родительского элемента.
.uk-flex-top Добавьте этот класс для выравнивания элементов по верхнему краю.
.uk-flex-middle Добавьте этот класс для центрирования элементов вдоль поперечной оси
.uk-flex-bottom Добавьте этот класс для выравнивания элементов по нижнему краю. 
<div class="uk-flex uk-flex-middle"></div>
  • Элемент 1
    Элемент 2
    ...
    Элемент 3
    ...
    ...
  • <div class="uk-flex uk-flex-middle uk-text-center">
  <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<br>...</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-left">Элемент 3<br>...<br>...</div>
</div>

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

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

Класс Описание
.uk-flex-row Добавьте этот класс, чтобы расположить элементы по горизонтали, слева направо.
.uk-flex-row-reverse Добавьте этот класс, чтобы расположить элементы по горизонтали, справа налево.
.uk-flex-column Добавьте этот класс, чтобы расположить элементы в виде вертикальных столбцов.
.uk-flex-column-reverse Добавьте этот класс, чтобы расположить элементы в виде вертикальных столбцов в обратном порядке. 
<div class="uk-flex uk-flex-column"></div>
  • Элемент 1
    Элемент 2
    Элемент 3
  • <div class="uk-flex uk-flex-column uk-width-1-3">
   <div class="uk-card uk-card-default uk-card-body">Элемент 1</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-top">Элемент 2</div>
   <div class="uk-card uk-card-default uk-card-body uk-margin-top">Элемент 3</div>
</div>

Модификатор обтекания

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

Класс Описание
.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-medium">
    <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>

Порядок элементов

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

Класс Описание
.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>

Жадность элементов

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

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

Компонент Flex в сетке

Компонент 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.jpg" alt="Image">
    </div>
</div>