Bootstrap 5 Flex

弹性框

Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。

弹性的框布局模块,可以更轻松地设计弹性响应式布局结构,而无需使用浮动或定位。

如果您不熟悉 flex,可以在我们的 CSS Flexbox 教程 中学习。

注释:IE9 及更早版本不支持 Flexbox。

注释:如果您需要 IE8-9 支持,请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本,团队仍然支持它进行关键错误修复和文档更改。但是不会向其中添加任何新功能。

实例

如需创建 flexbox 容器并将直接子项转换为 flex 项,请使用 d-flex 类:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

亲自试一试

实例

如需创建行内 flexbox 容器,请使用 d-inline-flex 类:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

亲自试一试

水平方向

请使用 .flex-row 水平(并排)显示弹性项目。这是默认设置。

提示:使用 .flex-row-reverse 可水平方向右对齐:

实例

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

亲自试一试

垂直方向

请使用 .flex-column 垂直显示 flex 项目(彼此堆叠),或使用 .flex-column-reverse 反转垂直方向:

实例

<div class="d-flex flex-column">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

亲自试一试

对齐内容

使用 .justify-content-* 类可改变弹性项目的对齐方式。有效的类是::

  • start(默认)
  • end
  • center
  • between
  • around

实例

<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>

亲自试一试

等宽

在 flex 项目上使用 .flex-fill 可强制它们等宽:

实例

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">弹性项目 1</div>
  <div class="p-2 bg-warning flex-fill">弹性项目 2</div>
  <div class="p-2 bg-primary flex-fill">弹性项目 3</div>
</div>

亲自试一试

伸展

在 flex 项目上使用 .flex-grow-1 可占用多余的空间。在下面的例子中,前两个 flex 项目占用了必要的空间,而最后一个项目占用了剩余的可用空间:

实例

<div class="d-flex">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary flex-grow-1">弹性项目 3</div>
</div>

亲自试一试

提示:在 flex 项目上使用 .flex-shrink-1 可使其在必要时收缩。

顺序

使用 .order 类可更改特定 flex 项的视觉顺序。有效的类从 0 到 5,其中最低的数字具有最高的优先级(order-1 显示在 order-2 之前,以此类推):

实例

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">弹性项目 1</div>
  <div class="p-2 bg-warning order-2">弹性项目 2</div>
  <div class="p-2 bg-primary order-1">弹性项目 3</div>
</div>

亲自试一试

自动外边距

使用 .ms-auto(将项目向右推)或使用 .me-auto(将项目向左推)可轻松地为弹性项目添加自动边距:

实例

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 me-auto bg-primary">弹性项目 3</div>
</div>

亲自试一试

换行

通过 .flex-nowrap(默认)、.flex-wrap.flex-wrap-reverse,可控制 flex 项目如何包装在 flex 容器中。

实例

<div class="d-flex flex-wrap">..</div>

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

<div class="d-flex flex-nowrap">..</div>

亲自试一试

对齐内容

请使用 .align-content-* 类控制弹性项目的垂直对齐方式。有效的类是:

  • .align-content-start(默认)
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

注释:这些类对单行弹性项没有影响。

请单击下面的按钮,通过更改实例框中弹性项的垂直对齐方式来查看五个类的区别:

实例

<div class="d-flex flex-wrap align-content-start">..</div>

<div class="d-flex flex-wrap align-content-end">..</div>

<div class="d-flex flex-wrap align-content-center">..</div>

<div class="d-flex flex-wrap align-content-around">..</div>

<div class="d-flex flex-wrap align-content-stretch">..</div>

亲自试一试

对齐项目

请使用 .align-items-* 类控制单行弹性项目的垂直对齐方式。有效的类是:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch(默认)

请单击下面的按钮查看五个类之间的区别:

实例

<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-self-* 类控制指定弹性项目的垂直对齐方式。有效的类是:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch(默认)

单击下面的按钮查看五个类之间的区别:

实例

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

亲自试一试

响应式 Flex 类

所有弹性类都带有额外的响应类,这使得在特定屏幕尺寸上设置特定 flex 类变得容易。

* 符号可以替换为 sm、md、lg、xl 或 xxl,分别代表小、中、大、超大和特大屏幕。

搜索特定的弹性类 ..

描述 例子
弹性容器
.d-*-flex 为不同的屏幕创建 flexbox 容器。 试一试
.d-*-inline-flex 为不同的屏幕创建行内的 flexbox 容器。 试一试
方向
.flex-*-row 在不同屏幕上水平显示弹性项目。 试一试
.flex-*-row-reverse 在不同的屏幕上水平和右对齐显示弹性项目。 试一试
.flex-*-column 在不同屏幕上垂直显示弹性项目。 试一试
.flex-*-column-reverse 在不同的屏幕屏幕上以相反的顺序垂直显示弹性项目。 试一试
齐行的内容
.justify-content-*-start 在不同屏幕上从开头(左对齐)显示弹性项目。 试一试
.justify-content-*-end 在不同屏幕的末尾(右对齐)显示弹性项目。 试一试
.justify-content-*-center 在不同屏幕的弹性容器中心显示弹性项目。 试一试
.justify-content-*-between 在不同屏幕上的均等显示弹性项目。 试一试
.justify-content-*-around 在不同屏幕上“围绕”显示弹性项目。 试一试
Fill / 等宽
.flex-*-fill 强制弹性项目在不同屏幕上的宽度相等。 试一试
扩展
.flex-*-grow-0 不要让项目在不同的屏幕上扩展。
.flex-*-grow-1 使项目在不同的屏幕上扩展。
收缩
.flex-*-shrink-0 不要让项目在不同屏幕上收缩。
.flex-*-shrink-1 使项目在不同屏幕上收缩。
顺序
.order-*-0-12 在小屏幕从 0 到 12 更改顺序。 试一试
换行
.flex-*-nowrap 不要在不同的屏幕上对项目换行。 试一试
.flex-*-wrap 在不同的屏幕上对项目换行。 试一试
.flex-*-wrap-reverse 反转不同屏幕上对项目的换行。 试一试
对齐内容
.align-content-*-start 在不同屏幕上从开头对齐项目。 试一试
.align-content-*-end 在不同屏幕的末尾对齐项目。 试一试
.align-content-*-center 在不同屏幕的中心对齐项目。 试一试
.align-content-*-around 在不同屏幕的周围对齐项目。 试一试
.align-content-*-stretch 在不同的屏幕上拉伸项目。 试一试
对齐项目
.align-items-*-start 在不同屏幕上从开头对齐单行项目。 试一试
.align-items-*-end 在不同屏幕的末尾对齐单行项目。 试一试
.align-items-*-center 在不同屏幕的中心对齐单行项目。 试一试
.align-items-*-baseline 在不同屏幕的基线上对齐单行项目。 试一试
.align-items-*-stretch 在不同屏幕上拉伸单行项目。 试一试
对齐自身
.align-self-*-start 在不同屏幕上从开头对齐弹性项目。 试一试
.align-self-*-end 在不同屏幕的末尾对齐弹性项目。 试一试
.align-self-*-center 在不同屏幕的中心对齐弹性项目。 试一试
.align-self-*-baseline 在不同屏幕的基线上对齐弹性项目。 试一试
.align-self-*-stretch 在不同屏幕上拉伸弹性项目。 试一试