Flex布局

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

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

用法

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

Class	Description
`.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	Description
`.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 元素两侧具有相等的间距。
`.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">
    <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>

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

垂直对齐

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

Class	Description
`.uk-flex-stretch`	扩展flex项目填满父容器的高度。
`.uk-flex-top`	对齐到顶部。
`.uk-flex-middle`	以中心主轴为准居中对齐。
`.uk-flex-bottom`	对齐到底部
`.uk-flex-stretch@s` `.uk-flex-top@s` `.uk-flex-middle@s` `.uk-flex-bottom@s`	仅适用于设备宽度在以下范围内的情况：640px或更高。
`.uk-flex-stretch@m` `.uk-flex-top@m` `.uk-flex-middle@m` `.uk-flex-bottom@m`	仅适用于设备宽度在以下范围内的情况：960px或更高。
`.uk-flex-stretch@l` `.uk-flex-top@l` `.uk-flex-middle@l` `.uk-flex-bottom@l`	仅适用于设备宽度在以下范围内的情况：1200px且更高。
`.uk-flex-stretch@xl` `.uk-flex-top@xl` `.uk-flex-middle@xl` `.uk-flex-bottom@xl`	仅适用于设备宽度在以下范围内的情况：1600px且更高。

<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	Description
`.uk-flex-row`	水平排列
`.uk-flex-row-reverse`	从右到左排列
`.uk-flex-column`	以垂直列的形式排列
`.uk-flex-column-reverse`	垂直地从底部到顶部排列
`.uk-flex-row@s` `.uk-flex-column@s`	仅适用于设备宽度在以下范围内的情况：640px或更高。
`.uk-flex-row@m` `.uk-flex-column@m`	仅适用于设备宽度在以下范围内的情况：960px或更高。
`.uk-flex-row@l` `.uk-flex-column@l`	仅适用于设备宽度在以下范围内的情况：1200px或更高。
`.uk-flex-row@xl` `.uk-flex-column@xl`	仅适用于设备宽度在以下范围内的情况：1600px或更高。

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

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

Class	Description
`.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	Description
`.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	Description
`.uk-flex-initial`	弹性项目基准尺寸由内容撑开，空间不足时允许收缩。
`.uk-flex-none`	盒子大小由内容决定，禁止收缩（空间不够也不压缩，会溢出）
`.uk-flex-auto`	根据内容分配空间
`.uk-flex-1`	只基于 flex来分配空间
`.uk-flex-initial@s` `.uk-flex-none@s` `.uk-flex-1@s`	仅适用于设备宽度在以下范围内的情况：640px或更高。
`.uk-flex-initial@m` `.uk-flex-none@m` `.uk-flex-1@m`	仅适用于设备宽度在以下范围内的情况：960px或更高。
`.uk-flex-initial@l` `.uk-flex-none@l` `.uk-flex-1@l`	仅适用于设备宽度在以下范围内的情况：1200px或更高。
`.uk-flex-initial@xl` `.uk-flex-none@xl` `.uk-flex-1@xl`	仅适用于设备宽度在以下范围内的情况：1600px或更高。

Flex 和网格

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

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

<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="/skin/ukv3/images/light.jpg" alt="Image">
    </div>
</div>

UIkit3.x文档