菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 4 Flex


Bootstrap 4 弹性布局

使用 flex 类来控制 Bootstrap 4 组件的布局。


Flexbox

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

Flexible Box Layout Module,无需使用 float 或 positioning 即可更轻松地设计灵活的响应式布局结构。如果您不熟悉 flex,可以在我们的 CSS Flexbox 教程中阅读相关内容。

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

如果您需要支持 IE8-9,请使用 Bootstrap 3。 它是最稳定的 Bootstrap 版本,并且仍然受到团队的支持以进行关键的 bug 修复和文档更改。但是,它不会添加任何新功能。

要创建一个 flexbox 容器并将直接子元素转换为 flex 元素,请使用 d-flex

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
自己动手试一试 »

要创建内联 flexbox 容器,请使用 d-inline-flex

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
自己动手试一试 »

水平方向

使用 .flex-row 水平显示 flex 元素(并排)。这是默认设置。

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

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
自己动手试一试 »

垂直方向

使用 .flex-column 垂直显示 flex 元素(堆叠在一起),或使用 .flex-column-reverse 来反转垂直方向

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
自己动手试一试 »


内容对齐

使用 .justify-content-* 类来更改 flex 元素的对齐方式。有效类有 start(默认)、endcenterbetweenaround

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 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 将它们强制设置为等宽

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
自己动手试一试 »

增长

在 flex 元素上使用 .flex-grow-1 来占据剩余的空间。在下面的示例中,前两个 flex 元素占据了它们所需空间,而最后一个元素占据了可用空间的剩余部分

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-flex">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
自己动手试一试 »

提示: 在 flex 元素上使用 .flex-shrink-1 使其在必要时收缩。


排序

使用 .order 类更改特定 flex 元素的视觉顺序。有效类为 0 到 12,数字越小优先级越高(order-1 显示在 order-2 之前,依此类推)

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex item 1</div>
  <div class="p-2 bg-warning order-2">Flex item 2</div>
  <div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
自己动手试一试 »

自动边距

使用 .mr-auto(将项目推到右侧)或使用 .ml-auto(将项目推到左侧)轻松地为 flex 元素添加自动边距

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<div class="d-flex bg-secondary">
  <div class="p-2 mr-auto bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 ml-auto bg-primary">Flex item 3</div>
</div>

自己动手试一试 »

换行

使用 .flex-nowrap(默认)、.flex-wrap.flex-wrap-reverse 控制 flex 元素在 flex 容器中的换行方式。

点击下面的按钮,通过更改示例框中 flex 元素的换行来查看这三个类的区别

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 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-* 类控制已聚集的 flex 元素的垂直对齐。有效类为 .align-content-start(默认)、.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch

注意: 这些类对单行 flex 元素没有影响。

点击下面的按钮,通过更改示例框中 flex 元素的垂直对齐来查看五个类的区别

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 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-* 类控制单行 flex 元素的垂直对齐。有效类为 .align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch(默认)。

点击下面的按钮查看五个类的区别

示例

Flex 项目 1
Flex 项目 2
Flex 项目 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-* 类控制指定 flex 元素的垂直对齐。有效类为 .align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch(默认)。

点击下面的按钮查看五个类的区别

示例

Flex 项目 1
Flex 项目 2
Flex 项目 3

示例

<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 类都带有额外的响应式类,可以轻松地在特定屏幕尺寸上设置特定的 flex 类。

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

描述 示例
Flex Container    
.d-*-flex 为不同屏幕创建 flexbox 容器 试一试
.d-*-inline-flex 为不同屏幕创建内联 flexbox 容器 试一试
方向    
.flex-*-row 在不同屏幕上水平显示 flex 元素 试一试
.flex-*-row-reverse 在不同屏幕上水平显示 flex 元素,并右对齐 试一试
.flex-*-column 在不同屏幕上垂直显示 flex 元素 试一试
.flex-*-column-reverse 在不同屏幕上垂直显示 flex 元素,并反转顺序 试一试
内容对齐    
.justify-content-*-start 在不同屏幕上从开头(左对齐)显示 flex 元素 试一试
.justify-content-*-end 在不同屏幕上从末尾(右对齐)显示 flex 元素 试一试
.justify-content-*-center 在不同屏幕的 flex 容器中心显示 flex 元素 试一试
.justify-content-*-between 在不同屏幕上以“之间”显示 flex 元素 试一试
.justify-content-*-around 在不同屏幕上以“周围”显示 flex 元素 试一试
填充 / 等宽    
.flex-*-fill 在不同屏幕上强制 flex 项目成为等宽 试一试
增长    
.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 在不同屏幕上从开头对齐一个 flex 项目 试一试
.align-self-*-end 在不同屏幕上在末尾对齐一个 flex 项目 试一试
.align-self-*-center 在不同屏幕上居中对齐一个 flex 项目 试一试
.align-self-*-baseline 在不同屏幕上的基线上对齐 flex 元素 试一试
.align-self-*-stretch 在不同屏幕上拉伸一个 flex 项目 试一试

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持