Flex

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

此组件使用 Flexbox，这是一种仍然相当新颖但功能强大的布局创建概念。

用法

要应用此组件，只需将 .uk-flex 类添加到 <div> 元素。这将创建一个 flex 容器。默认情况下，所有 flex 项目将左对齐，并且高度和宽度相等。

示例

盒子

标记

<div class="uk-flex">
    <div>...</div>
</div>

Flex 内联

默认情况下，flex 容器显示为块元素。要应用内联元素的行为，同时仍然按照 flexbox 模型布局其内容，请使用 .uk-flex-inline 类而不是 uk-flex。

修饰符

您可以添加许多不同的类来修改 flex 行为。

对齐

这些类定义了 flex 项目的水平和垂直对齐方式，并分配它们之间的空间。

类	描述
`.uk-flex-center`	添加此类可使 flex 项目水平居中。
`.uk-flex-right`	添加此类可使 flex 项目右对齐。
`.uk-flex-top`	添加此类可使 flex 项目顶部对齐。
`.uk-flex-middle`	添加此类可使 flex 项目垂直居中。
`.uk-flex-bottom`	添加此类可使 flex 项目底部对齐。
`.uk-flex-space-between`	添加此类可均匀分配项目，第一个项目位于主轴的开头，最后一个项目位于主轴的末尾。
`.uk-flex-space-around`	添加此类可均匀分配项目，每个项目的两侧都有相等的空间。

示例

盒子

标记

<div class="uk-flex uk-flex-middle uk-flex-space-between">...</div>

方向

这些类定义了 flex 项目放置的轴及其方向。默认情况下，项目从左到右水平排列。

类	描述
`.uk-flex-row-reverse`	添加此类可使 flex 项目从右到左排列。
`.uk-flex-column`	添加此类可将 flex 项目布局为垂直列。
`.uk-flex-column-reverse`	添加此类可使 flex 项目从下到上排列。

示例

标记

<div class="uk-flex uk-flex-column uk-flex-column-reverse">...</div>

换行

默认情况下，flex 项目适合在一行中。添加 .uk-flex-wrap 类，以便当项目不再适合视口时，它们会换行到另一行。要更改项目的方向使其从右到左运行，请添加 .uk-flex-wrap-reverse 类。以下类修改换行 flex 项目的对齐方式。要强制 flex 项目在一行中显示，只需添加 .uk-flex-nowrap 类。

类	描述
`.uk-flex-wrap-top`	添加此类可使多行 flex 项目顶部对齐。
`.uk-flex-wrap-middle`	添加此类可使多行 flex 项目垂直居中。
`.uk-flex-wrap-bottom`	添加此类可使多行 flex 项目底部对齐。
`.uk-flex-wrap-space-between`	添加此类可均匀分配项目行，第一行位于容器的顶部，最后一行位于容器的底部。
`.uk-flex-wrap-space-around`	添加此类可均匀分配行，每行的顶部和底部都有相等的空间。

示例

标记

<div class="uk-flex uk-flex-wrap uk-flex-wrap-reverse uk-flex-wrap-space-around">...</div>

项目顺序

默认情况下，flex 项目按照源顺序进行布局。要将某个项目显示为第一个或最后一个项目，只需添加以下类之一。

类	描述
`.uk-flex-order-first`	将该项目显示为第一个。
`.uk-flex-order-last`	将该项目显示为最后一个。
`.uk-flex-order-first-small` `.uk-flex-order-last-small`	影响 480px 及更高设备宽度。
`.uk-flex-order-first-medium` `.uk-flex-order-last-medium`	影响 768px 及更高设备宽度。
`.uk-flex-order-first-large` `.uk-flex-order-last-large`	影响 960px 及更高设备宽度。
`.uk-flex-order-first-xlarge` `.uk-flex-order-last-xlarge`	影响 1220px 及更高设备宽度。

示例

标记

<div class="uk-flex">
   <div class="uk-flex-order-first">...</div>
</div>

项目尺寸

要确定 flex 项目应占用多少空间，请将以下类之一添加到该项目。

类	描述
`.uk-flex-item-none`	框的大小由其内容决定。
`.uk-flex-item-auto`	空间分配考虑了项目的内容。
`.uk-flex-item-1`	空间仅基于 flex 分配。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.