Flex布局

利用flexbox的强大功能创建各种布局。

Flex组件在UIkit中构建布局中起着至关重要的作用。 很多组件，例如 Grid 和水平导航，例如 Navbar, Subnav, Breadcrumb, Pagination, Tab 和 Dotnav 都是由flexbox构建的，还可以同时使用 flex 组件的多个效果样式。

用法

要使用 flexbox 布局模式，需要用到下列 class。默认情况下，所有 flex 元素都会和他们的内容一样左对齐，宽度和内容相同，并匹配高度。

Class 描述
.uk-flex 创建具有块元素特征的 flex 容器。
.uk-flex-inline 创建具有行内元素特征的 flex 容器。 
<div class="uk-flex">
    <div></div>
</div>
  • Item 1
    Item 2
    Item 3
  • <div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

水平对齐

这些类定义了flex元素的水平对齐方式，并在它们之间分配间距。 将其中一个或多个添加到flex容器中来flex元素的对齐方式。 flex元素默认为左对齐，和 .uk-flex-left class类效果相同。

Class 描述
.uk-flex-left 添加这个class将flex项目左对齐。
.uk-flex-center 添加这个class将flex项目沿主轴居中对齐。
.uk-flex-right 添加这个class将flex项目右对齐。
.uk-flex-between 添加这个class将flex项目以中心主轴为准均匀分配，使元素之间间距相等。
.uk-flex-around 添加这个class可均匀分配元素，使每个 flex 元素两侧具有相等的间距。 
<div class="uk-flex uk-flex-center">
    <div></div>
</div>
  • Item 1
    Item 2
    Item 3
  • <div class="uk-flex uk-flex-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

响应式

UIkit提供了许多用于水平对齐的响应式Flex类。 它们与普通的flex对齐类基本相同，不同之处在于它们的后缀表示它们生效的断点。

Class 描述
.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">
    <div></div>
</div>
  • Item 1
    Item 2
    Item 3
  • <div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

垂直对齐

T这些类定义了flex项的垂直对齐方式。默认情况下，flex项目像 .uk-flex-stretch class类一样填充其容器的高度。

Class 描述
.uk-flex-stretch 扩展flex项目填满父容器的高度。
.uk-flex-top 对齐到顶部。
.uk-flex-middle 以中心主轴为准居中对齐。
.uk-flex-bottom 对齐到底部 
<div class="uk-flex uk-flex-middle"></div>
  • Item 1
    Item 2
    ...
    Item 3
    ...
    ...
  • <div class="uk-flex uk-flex-middle uk-text-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2<br>...</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3<br>...<br>...</div>
</div>

方向修饰符

下面这些类定义了flex主轴的方向。默认情况下，flex项目就像 .uk-flex-row class类一样从左到右水平排列。

Class 描述
.uk-flex-row 水平排列
.uk-flex-row-reverse 从右到左排列
.uk-flex-column 以垂直列的形式排列
.uk-flex-column-reverse 垂直地从底部到顶部排列 
<div class="uk-flex uk-flex-column"></div>
  • Item 1
    Item 2
    Item 3
  • <div class="uk-flex uk-flex-column uk-width-1-3">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 3</div>
</div>

换行修饰符

默认情况下，flex项放在同一行当中并从左到右排列。添加以下的class以改变flex项的换行行为。

Class 描述
.uk-flex-wrap 当 flex 元素不再适合其容器时，自动换到另一行。
.uk-flex-wrap-reverse 改变 flex 元素的方向使其从右至左
.uk-flex-nowrap 强制 flex 元素在同一行内显示。这是默认行为。

以下 class 用于调整flex元素的对齐方式。

Class 描述
.uk-flex-wrap-stretch 拉伸 flex 元素填满剩余空间
.uk-flex-wrap-between 均匀分配 flex 条目行，第一行在容器顶部，最后一行在底部
.uk-flex-wrap-around 均匀分配 flex 条目行，使每行顶部底部具有相等间距
.uk-flex-wrap-top 将多行 flex 元素对齐到顶部
.uk-flex-wrap-middle 垂直对齐多行 flex 元素
.uk-flex-wrap-bottom 将多行 flex 元素对齐到底部 
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around"></div>
  • Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
  • <div class="uk-flex uk-flex-wrap uk-flex-wrap-around uk-background-muted uk-height-medium">
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 2</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 4</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small">Item 5</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 6</div>
</div>

排序

默认情况下，flex项按源顺序排列。要将某个项显示为第一个或最后一个，只需添加下面这些class之一。

Class 描述
.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>
  • Item 1
    Item 2
    Item 3
  • <div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body uk-flex-last uk-margin-left">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-flex-first">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

空间范围

要确定弹性项目应占用多少空间，请在项目中添加以下类别之一。默认情况下，项目根据其内容确定其大小，但允许缩小。

Class 描述
.uk-flex-none 由内容决定盒子大小
.uk-flex-auto 根据内容分配空间
.uk-flex-1 只基于flex来分配空间

Flex和网格

Flex可以和 Grid 组件一起使用。

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

    Image 
  • <div class="uk-flex-middle" uk-grid>
    <div class="uk-width-2-3@m">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
    <div class="uk-width-1-3@m uk-flex-first">
        <img src="/images/light.jpg" alt="Image">
    </div>
</div>

上一篇： Filter

下一篇： Form

flex.md

# Flex布局

<p class="uk-text-lead">利用flexbox的强大功能创建各种布局。</p>

Flex组件在UIkit中构建布局中起着至关重要的作用。 很多组件，例如 [Grid](grid.md) 和水平导航，例如 [Navbar](navbar.md), [Subnav](subnav.md), [Breadcrumb](breadcrumb.md), [Pagination](pagination.md), [Tab](tab.md) 和 [Dotnav](dotnav.md) 都是由flexbox构建的，还可以同时使用 flex 组件的多个效果样式。

***

## Usage-用法

要使用 flexbox 布局模式，需要用到下列 class。默认情况下，所有 flex 元素都会和他们的内容一样左对齐，宽度和内容相同，并匹配高度。

| Class             | 描述                                                  |
|:------------------|:-------------------------------------------------------------|
| `.uk-flex`        | 创建具有块元素特征的 flex 容器。   |
| `.uk-flex-inline` | 创建具有行内元素特征的 flex 容器。 |

```html
<div class="uk-flex">
    <div></div>
</div>
```

```example
<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>
```

***

## Horizontal alignment-水平对齐

这些类定义了flex元素的水平对齐方式，并在它们之间分配间距。 将其中一个或多个添加到flex容器中来flex元素的对齐方式。 flex元素默认为左对齐，和 `.uk-flex-left` class类效果相同。

| Class              | 描述                                                                                         |
|:-------------------|:--------------------------------------------------------------------------------------------|
| `.uk-flex-left`    | 添加这个class将flex项目左对齐。  |
| `.uk-flex-center`  | 添加这个class将flex项目沿主轴居中对齐。      |
| `.uk-flex-right`   | 添加这个class将flex项目右对齐。   |
| `.uk-flex-between` | 添加这个class将flex项目以中心主轴为准均匀分配，使元素之间间距相等。 |
| `.uk-flex-around`  | 添加这个class可均匀分配元素，使每个 flex 元素两侧具有相等的间距。 |

```html
<div class="uk-flex uk-flex-center">
    <div></div>
</div>
```

```example
<div class="uk-flex uk-flex-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>
```

***

### 响应式

UIkit提供了许多用于水平对齐的响应式Flex类。 它们与普通的flex对齐类基本相同，不同之处在于它们的后缀表示它们生效的断点。

| Class | 描述 |
|:------|:------------|
| `.uk-flex-left@s`<br> `.uk-flex-center@s`<br> `.uk-flex-right@s`<br> `.uk-flex-between@s`<br> `.uk-flex-around@s` | 只影响 _640px_ 及以上宽度的设备。 |
| `.uk-flex-left@m`<br> `.uk-flex-center@m`<br> `.uk-flex-right@m`<br> `.uk-flex-between@m`<br> `.uk-flex-around@m` | 只影响 _960px_ 及以上宽度的设备。 |
| `.uk-flex-left@l`<br> `.uk-flex-center@l`<br> `.uk-flex-right@l`<br> `.uk-flex-between@l`<br> `.uk-flex-around@l` | 只影响 _1200px_ 及以上宽度的设备。 |
| `.uk-flex-left@xl`<br> `.uk-flex-center@xl`<br> `.uk-flex-right@xl`<br> `.uk-flex-between@xl`<br> `.uk-flex-around@xl` | 只影响 _1600px_ 及以上宽度的设备。 |

```html
<div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div></div>
</div>
```

```example
<div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>
```

***

## Vertical alignment-垂直对齐

T这些类定义了flex项的垂直对齐方式。默认情况下，flex项目像 `.uk-flex-stretch` class类一样填充其容器的高度。

| Class              | 描述                                                             |
|:-------------------|:------------------------------------------------------------------------|
| `.uk-flex-stretch` | 扩展flex项目填满父容器的高度。 |
| `.uk-flex-top`     | 对齐到顶部。                          |
| `.uk-flex-middle`  | 以中心主轴为准居中对齐。               |
| `.uk-flex-bottom`  | 对齐到底部                       |

```html
<div class="uk-flex uk-flex-middle"></div>
```

```example
<div class="uk-flex uk-flex-middle uk-text-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2<br>...</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3<br>...<br>...</div>
</div>
```

***

## Direction modifiers-方向修饰符

下面这些类定义了flex主轴的方向。默认情况下，flex项目就像 `.uk-flex-row` class类一样从左到右水平排列。

| Class                     | 描述                                               |
|:--------------------------|:----------------------------------------------------------|
| `.uk-flex-row`            | 水平排列  |
| `.uk-flex-row-reverse`    | 从右到左排列  |
| `.uk-flex-column`         | 以垂直列的形式排列 |
| `.uk-flex-column-reverse` | 垂直地从底部到顶部排列  |

```html
<div class="uk-flex uk-flex-column"></div>
```

```example
<div class="uk-flex uk-flex-column uk-width-1-3">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 3</div>
</div>
```

***

## Wrap modifiers-换行修饰符

默认情况下，flex项放在同一行当中并从左到右排列。添加以下的class以改变flex项的换行行为。

| Class                   | 描述                                                                                       |
|:------------------------|:------------------------------------------------------------------------------------------|
| `.uk-flex-wrap`         | 当 flex 元素不再适合其容器时，自动换到另一行。 |
| `.uk-flex-wrap-reverse` | 改变 flex 元素的方向使其从右至左                |
| `.uk-flex-nowrap`       | 强制 flex 元素在同一行内显示。这是默认行为。 |

以下 class 用于调整flex元素的对齐方式。

| Class                   | 描述                   |
|:------------------------|:-----------------------------------------------------------------------|
| `.uk-flex-wrap-stretch` | 拉伸 flex 元素填满剩余空间 |
| `.uk-flex-wrap-between` | 均匀分配 flex 条目行，第一行在容器顶部，最后一行在底部 |
| `.uk-flex-wrap-around`  | 均匀分配 flex 条目行，使每行顶部底部具有相等间距 |
| `.uk-flex-wrap-top`     | 将多行 flex 元素对齐到顶部  |
| `.uk-flex-wrap-middle`  | 垂直对齐多行 flex 元素  |
| `.uk-flex-wrap-bottom`  | 将多行 flex 元素对齐到底部                     |

```html
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around"></div>
```

```example
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around uk-background-muted uk-height-medium">
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 2</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 4</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small">Item 5</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 6</div>
</div>
```

***

## Item order-排序

默认情况下，flex项按源顺序排列。要将某个项显示为第一个或最后一个，只需添加下面这些class之一。

| Class                                      | 描述                                   |
|:-------------------------------------------|:----------------------------------------------|
| `.uk-flex-first`                           | 显示到第一个           |
| `.uk-flex-last`                            | 显示到最后一个            |
| `.uk-flex-first@s`<br> `.uk-flex-last@s`   | 只在 _640px_ 及以上的宽度生效。  |
| `.uk-flex-first@m`<br> `.uk-flex-last@m`   | 只在 _960px_ 及以上的宽度生效。  |
| `.uk-flex-first@l`<br> `.uk-flex-last@l`   | 只在 _1200px_ 及以上的宽度生效。 |
| `.uk-flex-first@xl`<br> `.uk-flex-last@xl` | 只在 _1600px_ 及以上的宽度生效。 |

```html
<div class="uk-flex">
  <div></div>
  <div class="uk-flex-first"></div>
</div>
```

```example
<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body uk-flex-last uk-margin-left">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-flex-first">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>
```

***

## Item dimensions-空间范围

要确定弹性项目应占用多少空间，请在项目中添加以下类别之一。默认情况下，项目根据其内容确定其大小，但允许缩小。

| Class           | 描述                                            |
|:----------------|:-------------------------------------------------------|
| `.uk-flex-none` | 由内容决定盒子大小           |
| `.uk-flex-auto` | 根据内容分配空间 |
| `.uk-flex-1`    | 只基于flex来分配空间           |

***

## Flex and grid-Flex和网格

Flex可以和 [Grid 组件](grid.md)一起使用。

```example
<div class="uk-flex-middle" uk-grid>
    <div class="uk-width-2-3@m">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
    <div class="uk-width-1-3@m uk-flex-first">
        <img src="images/light.jpg" alt="Image">
    </div>
</div>
```