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

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

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

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<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 可水平方向右对齐:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<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 反转垂直方向:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<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

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<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 可强制它们等宽:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<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 项目占用了必要的空间,而最后一个项目占用了剩余的可用空间:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<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 之前,以此类推):

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<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 (将项目向左推)可轻松地为弹性项目添加自动边距:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<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 容器中。

单击下面的按钮,通过更改示例框中弹性项目的包装,查看三个类之间的差异:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 4
弹性项目 5
弹性项目 6
弹性项目 7
弹性项目 8
弹性项目 9
弹性项目 10
弹性项目 11
弹性项目 12
弹性项目 13
弹性项目 14
弹性项目 15
弹性项目 16
弹性项目 17
弹性项目 18
弹性项目 19
弹性项目 20
弹性项目 21
弹性项目 22
弹性项目 23
弹性项目 24
弹性项目 25

实例

<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

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

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

Example

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 4
弹性项目 5
弹性项目 6
弹性项目 7
弹性项目 8
弹性项目 9
弹性项目 10
弹性项目 11
弹性项目 12
弹性项目 13
弹性项目 14
弹性项目 15
弹性项目 16
弹性项目 17
弹性项目 18
弹性项目 19
弹性项目 20
弹性项目 21
弹性项目 22
弹性项目 23
弹性项目 24
弹性项目 25

实例

<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(默认)

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

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<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(默认)

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

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">弹性项目 1</div>
  <div class="p-2 borderalign-self-start">弹性项目 2</div>
  <div class="p-2 border">弹性项目 3</div>
</div>
亲自试一试 »

响应式 Flex 类

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

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

描述 例子
弹性容器    
.d-*-flex 为不同的屏幕创建 flexbox 容器。 测试一下
.d-*-inline-flex 为不同的屏幕创建行内的 flexbox 容器。 测试一下
Direction    
.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 在不同屏幕上拉伸弹性项目。 测试一下