Bootstrap5 弹性
弹性盒
Bootstrap 3 和 Bootstrap 4 & 5 之间最大的区别是 Bootstrap 5 现在使用 Flexbox 而不是浮动来处理布局。
灵活的盒子布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。如果您是 Flex 新手，您可以在我们的文章中阅读相关内容CSS Flexbox 教程。
笔记：IE9 及更早版本不支持 Flexbox。
如果您需要 IE8-9 支持，请使用Bootstrap 3.它是 Bootstrap 最稳定的版本，并且团队仍然支持它进行关键错误修复和文档更改。但是，不会添加任何新功能。
要创建 Flexbox 容器并将直接子项转换为 Flex 项目，请使用d-flex类：
示例
Flex item 1
Flex item 2
Flex item 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 item 1
Flex item 2
Flex item 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-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 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-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">
<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-*类来更改弹性项目的对齐方式。有效的类是start（默认），end,center,between或者around:
示例
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 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-fill在弹性项目上强制它们具有相同的宽度：
示例
Flex item 1
Flex item 2
Flex item 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-grow-1在弹性项目上以占据其余空间。在下面的示例中，前两个 Flex 项目占用其必要的空间，而最后一个项目占用剩余的可用空间：
示例
Flex item 1
Flex item 2
Flex item 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-shrink-1在弹性项目上，使其在必要时收缩。
命令
使用以下命令更改特定弹性项目的视觉顺序.order类。有效的类是从 0 到 5，其中最小的数字具有最高的优先级（order-1 显示在 order-2 之前，等等）：
示例
Flex item 1
Flex item 2
Flex item 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>
亲自试一试 »
自动边距
轻松为弹性项目添加自动边距.ms-auto（将项目推到右侧），或使用.me-auto（将项目向左推）：
示例
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
示例
<div class="d-flex bg-secondary">
<div class="p-2 ms-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 me-auto bg-primary">Flex item 3</div>
</div>
亲自试一试 »
裹
控制弹性项目如何在弹性容器中包裹.flex-nowrap（默认），.flex-wrap或者.flex-wrap-reverse。
单击下面的按钮，通过更改示例框中的 Flex 项目的包装来查看这三个类之间的区别：
示例
Flex item 1
Flex item 2
Flex item 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-*类。有效的类是.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（默认）。
单击下面的按钮查看五个类别之间的区别：
示例
Flex item 1
Flex item 2
Flex item 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 或 xxl，分别代表小、中、大、xlarge 和 xxlarge 屏幕。
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | 尝试一下 |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | 尝试一下 |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | 尝试一下 |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | 尝试一下 |
.flex-*-column |
Display flex items vertically on different screens | 尝试一下 |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | 尝试一下 |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | 尝试一下 |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | 尝试一下 |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | 尝试一下 |
.justify-content-*-between |
Display flex items in "between" on different screens | 尝试一下 |
.justify-content-*-around |
Display flex items "around" on different screens | 尝试一下 |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | 尝试一下 |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 5 on small screens | 尝试一下 |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | 尝试一下 |
.flex-*-wrap |
Wrap items on different screens | 尝试一下 |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | 尝试一下 |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | 尝试一下 |
.align-content-*-end |
Align gathered items at the end on different screens | 尝试一下 |
.align-content-*-center |
Align gathered items in the center on different screens | 尝试一下 |
.align-content-*-around |
Align gathered items "around" on different screens | 尝试一下 |
.align-content-*-stretch |
Stretch gathered items on different screens | 尝试一下 |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | 尝试一下 |
.align-items-*-end |
Align single rows of items at the end on different screens | 尝试一下 |
.align-items-*-center |
Align single rows of items in the center on different screens | 尝试一下 |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | 尝试一下 |
.align-items-*-stretch |
Stretch single rows of items on different screens | 尝试一下 |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | 尝试一下 |
.align-self-*-end |
Align a flex item at the end on different screens | 尝试一下 |
.align-self-*-center |
Align a flex item in the center on different screens | 尝试一下 |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | 尝试一下 |
.align-self-*-stretch |
Stretch a flex item on different screens | 尝试一下 |