Flex

flexbox 工具的套件包管理网格栏的排版、对齐和特定尺寸。对于更复杂的表现则需要自订 CSS。

启用 flex

使用 display 通用类别来创建一个 flexbox 容器,并将 直属内元素 转换为 flex 属性。增加额外的 flex 属性,也能够进一步修改 flex 容器和属性。

I'm a flexbox container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

.d-flex.d-inline-flex 也存在响应式设计。

方向

透过通用类别来设定 flex 容器与内层 flex 的方向,在大多的情况下你可以忽略水平的 class,因为浏览器预设值是 row. 不过有些特定情境下需要设定这个值(比如在响应式环境下)。

使用 .flex-row 来设定水平的方向(浏览器预设值),或者使用 .flex-row-reverse 来作水平方向的反转。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

使用 .flex-column 设置垂直方向,或使用 .flex-column-reverse 作垂直方向的反转。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

flex-direction 的响应式属性。

调整内容

使用 flexbox 容器上的 justify-content 通用类别改变 flex 物件在主轴上的对齐(x轴开始,如果 flex-direction: column 则为 y 轴)。从 start 浏览器预设)。 end, center, between, 或 around 中选择。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

justify-content 的响应式属性。

对齐项目

在 flexbox 容器上使用 align-items 工具改变横轴上 flex 物件的对齐(y 轴开始,如果 flex-direction: column 则为 x 轴)。从 start, end, center, baseline, 或 stretch (浏览器预设) 中选择。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

align-items 包含的响应式属性。

自身对齐

使用 flexbox 物件上的 align-self 通用类别单独改变在横轴上的对齐(y 轴开始,如果 flex-direction: column 则为 x 轴)。与 align-items 相同的选项中选择: align-items: start, end, center, baseline, 或 stretch (浏览器预设)。

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

align-self 的响应式属性。

填满

在相邻元素上使用 .flex-fill 来强制它们在相同的宽度上分配所有可用的水平空间。对于等宽导览特别有用。

Flex item
Flex item
Flex item
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

flex-fill 同样包含响应式的组合。

伸缩值

使用 .flex-grow-* 通用类别来切换项目弹性增长以填充可用空间。在下面的范例中, .flex-grow-1 元素使用它可以使用的所有可用空间,同时允许剩余的两个 flex 物件保留必要的空间。

Flex item
Flex item
Third flex item
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

如果需要,使用 .flex-shrink-* 工具来切换调整项目的尺寸。 在下面的示例中,第二个带有 .flex-shrink-1 的弹性项目被强制将其内容包装到一个新行,“收缩”以允许更多空间用于上一个具有 .w-100 的弹性项目。

Flex item
Flex item
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

flex-growflex-shrink 也具备响应式设计。

自动的边距

当你将 flex 对齐与 auto margin 混在一起的时候,flexbox 也能正常的运行。下面的范例是透过自动 margin 来控制 flex 物件的三个案例:预设(无 margin),向右推两个项目(.mr-auto),并向左推两个项目(.ml-auto)。

不幸的是,IE10 和 IE11 在父层 justify-content value. 值并没有正确的表现,可以在搜索这个问题来了解更多细节。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

搭配 align-items

混合以下属性 align-items, flex-direction: column, 和 margin-top: automargin-bottom: auto,会将一个 flex 物件移动到容器的顶部或底部。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Wrap (Flex 的 Wrap 属性)

改变 flex 物件在 flex 容器中的 Wrap。可设置 .flex-nowrap, .flex-wrap, .flex-wrap-reverse 这些属性。

Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap-reverse">
  ...
</div>

flex-wrap 也包含响应式属性。

排序

使用 order 通用类别改变特定 flex 物件的 显示 排序。我们仅提供将一个物件排在第一个或最后一个,以及重置使用 DOM 次序。由于 order 只能使用整数值(例如,5),对需要的任何额外值需要自定义 CSS。

First flex item
Second flex item
Third flex item
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

order 也包含响应式设计。

对齐内容

使用 flexbox 容器上的 align-content 工具将 flex 物件于横轴上一起对齐。从 start 浏览器预设), end, center, between, around, or stretch 中选择。为了呈现这通用类别的效果,我们加入了 flex-wrap: wrap 及增加了flex项的数量。

注意!此特性对于单行的 flex 无作用。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-stretch flex-wrap">...</div>

align-content 也包含响应式设计。