Bootstrap 4 Flex
Bootstrap 4 Flex
使用 flex 类来控制 Bootstrap 4 组件的布局。
Flexbox
Bootstrap 3 和 Bootstrap 4 之间最大的区别是 Bootstrap 4 现在使用 flexbox 来处理布局，而不是浮动。
灵活的盒子布局模块，使得设计灵活的响应式布局结构变得更容易，而无需使用浮动或定位。如果你不熟悉 flex，你可以在我们的 CSS Flexbox 教程 中了解更多。
注意： Flexbox 在 IE9 及更早版本中不受支持。
如果你需要 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">Flex 项目 1</div>
<div class="p-2 bg-warning">Flex 项目 2</div>
<div class="p-2 bg-primary">Flex 项目 3</div>
</div>
尝试一下 »要创建内联 flexbox 容器，请使用 d-inline-flex 类
示例
示例
<div class="d-inline-flex p-3 bg-secondary text-white">
<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-row 将 flex 项目水平显示（并排）。这是默认设置。
提示：使用 .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 项目垂直显示（在彼此之上），或使用 .flex-column-reverse 反转垂直方向
示例
示例
<div class="d-flex flex-column">
<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-column-reverse">
<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>
尝试一下 »对齐内容
使用 .justify-content-* 类更改 flex 项目的对齐方式。有效的类是 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">Flex 项目 1</div>
<div class="p-2 bg-warning flex-fill">Flex 项目 2</div>
<div class="p-2 bg-primary flex-fill">Flex 项目 3</div>
</div>
尝试一下 »增长
在 flex 项目上使用 .flex-grow-1 以占用剩余的空间。在下面的示例中，前两个 flex 项目占用它们必要的空间，而最后一个项目占用剩余的可用空间
示例
示例
<div class="d-flex">
<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-grow-1">Flex 项目 3</div>
</div>
尝试一下 »提示：在 flex 项目上使用 .flex-shrink-1 使它在必要时缩小。
顺序
使用 .order 类更改特定 flex 项目的视觉顺序。有效的类从 0 到 12，其中数字越小优先级越高（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>
尝试一下 »自动边距
使用 .mr-auto（将项目推到右侧）或使用 .ml-auto（将项目推到左侧）轻松地为 flex 项目添加自动边距
示例
示例
<div class="d-flex bg-secondary">
<div class="p-2 mr-auto 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 bg-secondary">
<div class="p-2 bg-info">Flex 项目 1</div>
<div class="p-2 bg-warning">Flex 项目 2</div>
<div class="p-2 ml-auto bg-primary">Flex 项目 3</div>
</div>
尝试一下 »包裹
使用 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse 控制 flex 项目在 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-* 类控制聚集 flex 项目的垂直对齐方式。有效的类是 .align-content-start（默认）、.align-content-end、.align-content-center、.align-content-between、.align-content-around 和 .align-content-stretch。
注意：这些类对 flex 项目的单行没有影响。
示例
示例
<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（默认）。
点击下面的按钮查看五个类之间的区别
示例
示例
<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">弹性项目 1</div>
<div class="p-2 border align-self-start">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
尝试一下 »响应式弹性类
所有弹性类都带有额外的响应式类，方便您在特定屏幕尺寸上设置特定的弹性类。
* 符号可以替换为 sm、md、lg 或 xl，分别代表小型、中型、大型或特大型屏幕。
| 类 | 描述 | 示例 |
|---|---|---|
| 弹性容器 | ||
.d-*-flex |
为不同屏幕创建弹性盒子容器 | 试试看 |
.d-*-inline-flex |
为不同屏幕创建内联弹性盒子容器 | 试试看 |
| 方向 | ||
.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 |
在不同屏幕上将弹性项目显示在“周围” | 试试看 |
| 填充/等宽 | ||
.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 |
在不同屏幕上拉伸弹性项目 | 试试看 |
