跳到主要内容

文档

Flex

利用 flexbox 的强大能力，创建丰富多样的布局。

Flex 组件在 UIkit 的布局构建中扮演着核心角色。许多组件都是用 flexbox 构建的，例如 Grid 以及水平导航，如 Navbar、Subnav、Breadcrumb、Pagination、Tab 和 Dotnav，它们都可以与该组件的工具类配合使用。

用法

要应用 flexbox 布局模型，请使用下列类之一。默认情况下，所有 flex 项目都左对齐，宽度与内容一致，高度相互匹配。

类 说明
.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 类的效果相同。

类 说明
.uk-flex-left 添加该类，使 flex 项目左对齐。
.uk-flex-center 添加该类，使 flex 项目沿主轴居中。
.uk-flex-right 添加该类，使 flex 项目右对齐。
.uk-flex-between 添加该类，使项目均匀分布，沿主轴方向上项目之间间隔相等。
.uk-flex-around 添加该类，使项目均匀分布，每个项目两侧间隔相等。
.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 类的效果相同。

类 说明
.uk-flex-stretch 添加该类，使 flex 项目拉伸以填满父元素的高度。
.uk-flex-top 添加该类，使 flex 项目顶部对齐。
.uk-flex-middle 添加该类，使 flex 项目沿交叉轴居中。
.uk-flex-bottom 添加该类，使 flex 项目底部对齐。
.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 项目所处的轴及其方向。默认情况下，项目从左到右水平排列，与 .uk-flex-row 类的效果相同。

类 说明
.uk-flex-row 添加该类，把 flex 项目按水平行排列。
.uk-flex-row-reverse 添加该类，把 flex 项目按从右到左排列。
.uk-flex-column 添加该类，把 flex 项目按垂直列排列。
.uk-flex-column-reverse 添加该类，把 flex 项目按从下到上排列。
.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 项目被挤在一行内，从左向右排列。添加下列类之一，可以改变 flex 项目的换行行为。

类 说明
.uk-flex-wrap 添加该类，使 flex 项目在容器放不下时换到另一行。
.uk-flex-wrap-reverse 添加该类，改变项目的排列方向，使其从右到左排列。
.uk-flex-nowrap 添加该类，强制 flex 项目排在一行内。这是默认行为。

以下类用于修改换行后 flex 项目的对齐方式。

类 说明
.uk-flex-wrap-stretch 添加该类，使各项目行拉伸以占据剩余空间
.uk-flex-wrap-between 添加该类，使各行均匀分布，第一行位于容器顶部，最后一行位于容器底部。
.uk-flex-wrap-around 添加该类，使各行均匀分布，每行上下间隔相等。
.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 项目按照源码顺序排列。要把某个项目显示为第一个或最后一个，只需添加下列类之一。

类 说明
.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>

项目尺寸

要决定某个 flex 项目应占据多少空间，请为该项目添加下列类之一。默认情况下，项目根据其内容决定尺寸，但允许收缩。

类 说明
.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.

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" width="1800" height="1200" alt="Image">
    </div>
</div>