跳到主要内容

文档

Flex

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

Flex 组件在 UIkit 中构建布局方面起着至关重要的作用。许多组件，例如网格以及水平导航，如导航栏、子导航、面包屑、分页、标签页和点导航，都是使用 flexbox 构建的，可以与此组件的实用工具类一起使用。

用法

要应用 flexbox 布局模型，请使用以下类之一。默认情况下，所有 flex 项目都靠左对齐，宽度与它们的内容一样宽，并且高度一致。

类 描述
.uk-flex 创建 flex 容器，并表现得像一个块元素。
.uk-flex-inline 创建 flex 容器，并表现得像一个内联元素。 
<div class="uk-flex">
    <div></div>
</div>
项目 1
项目 2
项目 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>
项目 1
项目 2
项目 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>
项目 1
项目 2
项目 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>
项目 1
项目 2
…
项目 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>
项目 1
项目 2
项目 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>
项目 1
项目 2
项目 3
项目 4
项目 5
项目 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>
项目 1
项目 2
项目 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 组件可以与网格组件的网格结合使用。

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>