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 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)

Разметка

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

Пример (flex-column)

Разметка

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

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

Разметка

<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)

Разметка

<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)

Разметка

<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)

Разметка

<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)

Разметка

<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)

Разметка

<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)

Разметка

<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)

Блок 2

Разметка

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

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

Блок 2

Разметка

<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)

Разметка

<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)

Разметка

<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)

Разметка

<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.

Пример

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

Разметка

<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>