宽度／Width

定义元素在不同视口大小中的宽度。

UIkit的Width组件通常与 grids 结合使用，以将内容拆分为响应列。您可以应用分数、自动宽度或扩展单元宽度填充满剩余空间等多种模式以及组合使用这些模式。

用法

添加一个 .uk-width-* class到元素来确定它的大小。通常，你需要用到 Grid 组件 以及它的子元素来创建布局单元。

Class 描述
.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 元素占其父容器的六分之一

注意 由于我们移除了每组单元class集中的冗余，所以例如列宽为 .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>

自动宽度 & 扩展宽度

宽度组件提供了额外的修饰，使您可以更灵活地分配项目。

Class 描述
.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>

等分网格

要创建一个宽度均分的网格，无需为网格中的每个条目都重复添加相同的class。只需将 .uk-child-width-* class之一添加到网格本身即可。

Class 描述
.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>
  • Item
    Item
    Item
    Item
    Item
  • <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">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

如果使用分数宽度class的条目不再适合容器的宽度时，那么会截断强制换行。但在使用 expand class时，将在始终在同一行均分可用空间。

<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div></div>
    ...
</div>
  • Item
    Item
    Item
    Item
    Item
  • <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">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

固定宽度

除了上面的计算型的宽度class之外，还可以添加使用以下应用固定宽度的class。

Class 描述
.uk-width-small 应用固定宽度 150px.
.uk-width-medium 应用固定宽度 300px.
.uk-width-large 应用固定宽度 450px.
.uk-width-xlarge 应用固定宽度 600px.
.uk-width-2xlarge 应用固定宽度 750px. 
<div class="uk-width-medium"></div>
  • Small
    Medium
    Large
    X-Large
    2X-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-2xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">2X-Large</div></div>

混合宽度

您还可以将 .uk-child-width-* class与 .uk-width-* class组合起来用于单个项。例如就可以创建这样一个网格：其中一个条目拥有特定宽度，其他条目则自动扩展以填充剩余的空间。

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

响应式宽度

UUIkit提供了许多响应式宽度class。基本上它们和普通的的宽度class一样，但是它们拥有的后缀表示从中生效的不同断点。这些类可以与 Visibility 组件组合使用。这样在不同的设备尺寸下可以很好的调整布局和内容。

Class 描述
.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>

上一篇： Visibility

width.md

# 宽度／Width

<p class="uk-text-lead">定义元素在不同视口大小中的宽度。</p>

UIkit的Width组件通常与 [grids](grid.md) 结合使用，以将内容拆分为响应列。您可以应用分数、自动宽度或扩展单元宽度填充满剩余空间等多种模式以及组合使用这些模式。

***

## Usage-用法

添加一个 `.uk-width-*` class到元素来确定它的大小。通常，你需要用到 [Grid 组件](grid.md) 以及它的子元素来创建布局单元。

| Class                              | 描述                                           |
|:-----------------------------------|:------------------------------------------------------|
| `.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` | 元素占其父容器的六分之一  |

**注意** 由于我们移除了每组单元class集中的冗余，所以例如列宽为 `.uk-width-3-6` 这种情形时，应使用 `.uk-width-1-2`。

```html
<div uk-grid>
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>
```

```example
<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-自动宽度 & 扩展宽度

宽度组件提供了额外的修饰，使您可以更灵活地分配项目。

| Class              | 描述                                                            |
|:-------------------|:-----------------------------------------------------------------------|
| `.uk-width-auto`   | 扩展到其自身内容的宽度。                 |
| `.uk-width-expand` | 扩展以填充网格容器的所有剩余空间。 |

```html
<div uk-grid>
    <div class="uk-width-auto"></div>
    <div class="uk-width-expand"></div>
</div>
```

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

***

## Equal child widths-等分网格

要创建一个宽度均分的网格，无需为网格中的每个条目都重复添加相同的class。只需将 `.uk-child-width-*` class之一添加到网格本身即可。

| Class                    | 描述                                                         |
|:-------------------------|:--------------------------------------------------------------------|
| `.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` | 根据可用宽度空间将网格划分为相等的单位。 |

```html
<div class="uk-child-width-1-4" uk-grid>
    <div></div>
    <div></div>
    ...
</div>
```

```example
<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">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>
```

如果使用分数宽度class的条目不再适合容器的宽度时，那么会截断强制换行。但在使用 _expand_ class时，将在始终在同一行均分可用空间。

```html
<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div></div>
    ...
</div>
```

```example
<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">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>
```

***

## Fixed width-固定宽度

除了上面的计算型的宽度class之外，还可以添加使用以下应用固定宽度的class。

| Class               | 描述                       |
|:--------------------|:----------------------------------|
| `.uk-width-small`   | 应用固定宽度 _150px_. |
| `.uk-width-medium`  | 应用固定宽度 _300px_. |
| `.uk-width-large`   | 应用固定宽度 _450px_. |
| `.uk-width-xlarge`  | 应用固定宽度 _600px_. |
| `.uk-width-2xlarge` | 应用固定宽度 _750px_. |

```html
<div class="uk-width-medium"></div>
```

```example
<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-2xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">2X-Large</div></div>
```

***

## Mixing widths-混合宽度

您还可以将 `.uk-child-width-*` class与 `.uk-width-*` class组合起来用于单个项。例如就可以创建这样一个网格：其中一个条目拥有特定宽度，其他条目则自动扩展以填充剩余的空间。

```html
<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div class="uk-width-1-3"></div>
    <div></div>
    ...
</div>
```

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

***

## Responsive width-响应式宽度

UUIkit提供了许多响应式宽度class。基本上它们和普通的的宽度class一样，但是它们拥有的后缀表示从中生效的不同断点。这些类可以与 [Visibility 组件](visibility.md)组合使用。这样在不同的设备尺寸下可以很好的调整布局和内容。

| Class                                       | 描述             |
|:--------------------------------------------|:--------------------------------------|
| `.uk-width-*`<br> `.uk-child-width-*`       | 影响所有的设备宽度，网格列将并排放置。          |
| `.uk-width-*@s`<br> `.uk-child-width-*@s`   | 影响 _640px_ 及以上的设备宽度。网格列将在较小的视口中堆叠。  |
| `.uk-width-*@m`<br> `.uk-child-width-*@m`   | 影响 _960px_ 及以上的设备宽度。网格列将在较小的视口中堆叠。  |
| `.uk-width-*@l`<br> `.uk-child-width-*@l`   | 影响 _1200px_ 及以上的设备宽度。网格列将在较小的视口中堆叠。 |
| `.uk-width-*@xl`<br> `.uk-child-width-*@xl` | 影响 _1600px_ 及以上的设备宽度。网格列将在较小的视口中堆叠。 |

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