前端必知必会-Bootstrap 5 Flex

---

Bootstrap 5 Flex

Flexbox

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

灵活框布局模块使设计灵活的响应式布局结构变得更加容易，而无需使用浮动或定位。

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

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

要创建弹性框容器并将直接子项转换为弹性项目，请使用 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>

要创建内联弹性框容器，请使用 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">Flex 项目 1</div>
<div class="p-2 bg-warning">Flex 项目 2</div>
<div class="p-2 bg-primary">Flex 项目 3</div>
</div>

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

垂直方向

使用 .flex-column 显示垂直方向（彼此叠放）弹性项目，或使用 .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、before 或 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-grow-1 来占据剩余空间。在下面的示例中，前两个弹性项目占据了其必要的空间，而最后一个项目占据了剩余的可用空间：

示例

示例

<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-shrink-1 使其在必要时缩小。

顺序

使用 .order 类更改特定弹性项目的视觉顺序。有效类别从 0 到 5，其中最小数字具有最高优先级（order-1 显示在 order-2 之前，等等）：

示例

示例

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

自动边距

使用 .ms-auto（将项目推到右侧）或使用 .me-auto（将项目推到左侧）轻松为 Flex 项目添加自动边距：

示例

示例

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

Wrap

使用 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse 控制弹性项目在弹性容器中的换行方式。

示例

示例

<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-* 类控制指定弹性项目的垂直对齐。有效类为 .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 项目 1</div>
<div class="p-2 border align-self-start">Flex 项目 2</div>
<div class="p-2 border">Flex 项目 3</div>
</div>

响应式 Flex 类

所有 Flex 类都附带额外的响应式类，这使得在特定屏幕尺寸上设置特定 Flex 类变得容易。

• 符号可以替换为 sm、md、lg、xl 或 xxl，分别代表小、中、大、xlarge 和 xxlarge 屏幕。

类	描述
.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	在不同屏幕上的“之间”显示弹性项目
.justify-content-*-around	在不同屏幕上的“周围”显示弹性项目
.flex-*-fill	在不同屏幕上强制弹性项目等宽
.flex-*-grow-0	在不同屏幕上不使项目扩大
.flex-*-grow-1	在不同屏幕上使项目扩大
.flex-*-shrink-0	在不同屏幕上不使项目缩小
.flex-*-shrink-1	在不同屏幕上使项目缩小
.order-*-0-12	在小屏幕上将顺序从 0 改为 5
.flex-*-nowrap	在不同屏幕上不换行项目
.flex-*-wrap	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	在不同屏幕上拉伸弹性项目

---

总结

本文介绍了Bootstrap 5 Flex的使用，如有问题欢迎私信和评论