Ширина

Устанавливайте ширину элементов для разных размеров экранов. Забудьте об ограничениях по количеству колонок.

Компонент ширины UIkit 3 используется в совместкно с Сеткой для разделения контента на отзывчивые столбцы. Вы можете применять дроби, автоматическую ширину или расширить элементы, чтобы заполнить оставшееся пространство. Все указанные режимы можно использовать одновременно.

Как использовать компонент Width в UIkit 3

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

Класс Описание
.uk-width-1-1 Заполняет 100% свободного пространства.
.uk-width-1-2 Элемент занимает половину родительского контейнера.
.uk-width-1-3 и .uk-width-2-3 Элемент занимает одну треть родительского контейнера.
.uk-width-1-4 и .uk-width-3-4 Элемент занимает одну четверть родительского контейнера.
.uk-width-1-5 и .uk-width-4-5 Элемент занимает одну пятую часть родительского контейнера.
.uk-width-1-6 и .uk-width-5-6 Элемент занимает одну шестую часть родительского контейнера.

Внимание Мы намеренно частично удалили избыточные дроби в каждом наборе классов модулей, поэтому вместо .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>

Автоматическая ширина и распределение оставшегося места

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

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

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

Чтобы создать сетку, ширина дочерних элементов которой равномерно разделена, вам не нужно применять одинаковые классы для каждого элемента списка в сетке. Просто добавьте один из классов семейства .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>

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

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

Class Description
.uk-width-small Применяет фиксированную ширину 150px.
.uk-width-medium Применяет фиксированную ширину 300px.
.uk-width-large Применяет фиксированную ширину 450px.
.uk-width-xlarge Применяет фиксированную ширину 600px.
.uk-width-xxlarge Применяет фиксированную ширину 750px. 
<div class="uk-width-medium"></div>
  • Small
    Medium
    Large
    X Large
    XX Large
  • <div class="uk-width-small uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Small</div></div>
<div class="uk-width-medium uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Medium</div></div>
<div class="uk-width-large uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Large</div></div>
<div class="uk-width-xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">X Large</div></div>
<div class="uk-width-xxlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">XX Large</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 and larger. Столбцы сетки будут уменьшаться на меньших экранах.
.uk-width-*@l
.uk-child-width-*@l		 Работает на устройствах с экраном 1200px and larger. Столбцы сетки будут уменьшаться на меньших экранах.
.uk-width-*@xl
.uk-child-width-*@xl		 Работает на устройствах с экраном 1600px and larger. Столбцы сетки будут уменьшаться на меньших экранах.
  • 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>