Компонент Ширина

Определите ширину элементов для разных размеров области просмотра. Руководство. Модификаторы. Равная ширина дочерних элементов. Отзывчивая ширина.

Компонент Ширина UIkit 3 часто используется в сочетании с grid-сетками для разделения содержимого на отзывчивые колонки. Вы можете применять фиксированную ширину, ширину в процентном соотношении, и даже автоматическую, чтобы заполнить оставшееся пространство и объединить режимы.

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

Добавьте один из классов .uk-width-* к элементу, чтобы определить его размер. Как правило, для создания единиц измерения вы используете сетку из компонента Grid и его дочерних элементов.

Класс Описание
.uk-width-1-1 Заполняет 100% доступной ширины
.uk-width-1-2 Элемент занимает половину своего родительского контейнера.
Ширина: 50%
.uk-width-2-5 - .uk-width-3-5 Ширина элементов: 40% - 60%
.uk-width-1-3 - .uk-width-2-3 Ширина элементов: ~ 33.3..% - ~ 66.6..%
.uk-width-1-4 - .uk-width-3-4 Ширина элементов: 25% - 75%
.uk-width-1-5 - .uk-width-4-5 Ширина элементов: 20% - 80%
.uk-width-1-6 - .uk-width-5-6 Ширина элементов: ~ 16.6..% - ~ 83.3..%
Примечание Избыточность UIkit 2 в каждом наборе классов удалена, так что, например, вместо класса .uk-width-3-6 вы должны использовать .uk-width-1-2. 
<div uk-grid>
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>
1-3
1-3
1-3
1-2
1-2
1-4
3-4
<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
</div>
<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-2">
        <div class="uk-card uk-card-default uk-card-body">1-2</div>
    </div>
    <div class="uk-width-1-2">
        <div class="uk-card uk-card-default uk-card-body">1-2</div>
    </div>
</div>
<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-4">
        <div class="uk-card uk-card-default uk-card-body">1-4</div>
    </div>
    <div class="uk-width-3-4">
        <div class="uk-card uk-card-default uk-card-body">3-4</div>
    </div>
</div>

«Auto» & «Expand»

Модификаторы «Auto» & «Expand»

Компонент Ширина предоставляет дополнительные модификаторы, которые обеспечивают большую гибкость при распределении.

Класс Описание
.uk-width-auto Элемент расширяется только до ширины собственного контента.
.uk-width-expand Элемент расширяется, чтобы заполнить оставшееся пространство контейнера сетки. 
<div uk-grid>
    <div class="uk-width-auto"></div>
    <div class="uk-width-expand"></div>
</div>
Auto
Expand
<div class="uk-text-center" uk-grid>
    <div class="uk-width-auto">
        <div class="uk-card uk-card-default uk-card-body">Auto</div>
    </div>
    <div class="uk-width-expand">
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
</div>

Равная ширина дочерних элементов

Чтобы создать grid-сетку, ширина дочерних элементов которой разделена поровну, вам не нужно применять один и тот же класс к каждому элементу списка в сетке. Добавьте в сетку один из классов .uk-child-width-*.

Класс Описание
.uk-child-width-1-2 Все элементы занимают половину своего родительского контейнера.
.uk-child-width-1-3 Все элементы занимают треть своего родительского контейнера.
.uk-child-width-1-4 Все элементы занимают четверть своего родительского контейнера.
.uk-child-width-1-5 Все элементы занимают пятую часть своего родительского контейнера.
.uk-child-width-1-6 Все элементы занимают шестую часть своего родительского контейнера.
.uk-child-width-auto Делит сетку на равные единицы в зависимости от размера контента.
.uk-child-width-expand Делит сетку на равные единицы в зависимости от доступного пространства. 
<div class="uk-child-width-1-4" uk-grid>
    <div></div>
    <div></div>
    ...
</div>
Блок
Блок
Блок
Блок
Блок
<div class="uk-child-width-1-4 uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Блок</div>
    </div>
</div>

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

<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div></div>
    ...
</div>
Карта
Карта
Карта
Карта
Карта
<div class="uk-child-width-expand uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Карта</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Карта</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Карта</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Карта</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Карта</div>
    </div>
</div>

Фиксированная ширина

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

Класс Описание
.uk-width-small Применяет фиксированную ширину 150px.
.uk-width-medium Применяет фиксированную ширину 300px.
.uk-width-large Применяет фиксированную ширину 450px.
.uk-width-xlarge Применяет фиксированную ширину 600px.
.uk-width-2xlarge Применяет фиксированную ширину 750px. С весрии UIkit 3.5
.uk-width-xxlarge Применяет фиксированную ширину 750px. Устаревшее. Работает до версии 3.5 
<div class="uk-width-medium"></div>
Small     150px
Medium 300px
Large     450px
XLarge  600px
2XLarge 750px
<div class="uk-width-small uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Small&nbsp;&nbsp;&nbsp;&nbsp; <small>150px</small></div></div>
<div class="uk-width-medium uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Medium <small>300px</small></div></div>
<div class="uk-width-large uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Large&nbsp;&nbsp;&nbsp;&nbsp; <small>450px</small></div></div>
<div class="uk-width-xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">XLarge&nbsp; <small>600px</small></div></div>
<div class="uk-width-2xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">2XLarge <small>750px</small></div></div>

Смешанная ширина

Вы также можете комбинировать классы .uk-child-width-* с классами .uk-width-* для отдельных элементов. Таким образом, можно, например, создать сетку с одним элементом, который имеет определенную ширину, а все другие элементы расширяются, чтобы заполнить оставшееся пространство.

<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div class="uk-width-1-3"></div>
    <div></div>
    ...
</div>
Expand
1-3
Expand
Expand
<div class="uk-child-width-expand uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
</div>

Отзывчивая ширина

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

Класс Описание
.uk-width-*
.uk-child-width-*		 Влияет на все ширины устройства.
Столбцы сетки остаются рядом.
.uk-width-*@s
.uk-child-width-*@s		 Влияет на ширину устройства от 640px и более.
Столбцы сетки будут складываться в меньшие размеры.
.uk-width-*@m
.uk-child-width-*@m		 Влияет на ширину устройства от 960px и более.
Столбцы сетки будут складываться в меньшие размеры.
.uk-width-*@l
.uk-child-width-*@l		 Влияет на ширину устройства от 1200px и более.
Столбцы сетки будут складываться в меньшие размеры.
.uk-width-*@xl
.uk-child-width-*@xl		 Влияет на ширину устройства от 1600px и более.
Столбцы сетки будут складываться в меньшие размеры.
1-2@m
1-4@m
1-4@m
1-5@m
hidden@l
1-5@m
1-3@l
3-5@m
2-3@l
auto@m
visible@l
1-3@m
expand@m
<div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
    <div class="uk-width-1-2@m">
        <div class="uk-card uk-card-default uk-card-body">1-2@m</div>
    </div>
    <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body">1-4@m</div>
    </div>
    <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body">1-4@m</div>
    </div>
    <div class="uk-width-1-5@m uk-hidden@l">
        <div class="uk-card uk-card-secondary uk-card-body">1-5@m<br>hidden@l</div>
    </div>
    <div class="uk-width-1-5@m uk-width-1-3@l">
        <div class="uk-card uk-card-default uk-card-body">1-5@m<br>1-3@l</div>
    </div>
    <div class="uk-width-3-5@m uk-width-2-3@l">
        <div class="uk-card uk-card-default uk-card-body">3-5@m<br>2-3@l</div>
    </div>
</div>

<div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
    <div class="uk-width-auto@m uk-visible@l">
        <div class="uk-card uk-card-primary uk-card-body">auto@m<br>visible@l</div>
    </div>
    <div class="uk-width-1-3@m">
        <div class="uk-card uk-card-default uk-card-body">1-3@m</div>
    </div>
    <div class="uk-width-expand@m">
        <div class="uk-card uk-card-default uk-card-body">expand@m</div>
    </div>
</div>

«max» & «min» content

Компонент Ширина предоставляет дополнительные модификаторы, которые работают с размерами в зависимости от контекста.

Класс Описание
.uk-width-max-content Ключевое слово max-content представляет внутреннюю максимальную ширину содержимого при неограниченном доступном пространстве, т.е. свести к минимуму незаполненное пространство и избежать переполнения.
.uk-width-min-content Ключевое слово min-content представляет внутреннюю минимальную ширину содержимого, который не приводит к переполнению. 
<div>
    <div class="uk-width-max-content">...</div>
    <div class="uk-width-min-content">...</div>
</div>