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

<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	Description
`.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>

垂直对齐

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

Class	Description
`.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	Description
`.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	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-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.

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