跳至主要内容

文档

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>