Компонент 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>

Отзывчивость и горизонтальное выравнивание

Фреймворк 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>

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

Эти классы определяют ось, на которой располагаются 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>

Модификаторы «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-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>

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="/demo/img/light.jpg" width="450" height="300" alt="Image" loading="lazy">
        </div>
    </div>