UIkit3.x文档

Flex布局

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

Flex组件在UIkit中构建布局中起着至关重要的作用。 很多组件,例如Grid和水平导航,例如Navbar, Subnav, Breadcrumb, Pagination, TabDotnav都是由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.

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