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
类
示例
示例
<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
类
示例
示例
<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
来右对齐水平方向
示例
示例
<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
来反转垂直方向
示例
示例
<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
(默认)、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 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 元素占据了它们所需空间,而最后一个元素占据了可用空间的剩余部分
示例
示例
<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 之前,依此类推)
示例
示例
<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 元素添加自动边距
示例
示例
<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 元素的换行来查看这三个类的区别
示例
示例
<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-*
类控制指定 flex 元素的垂直对齐。有效类为 .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 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 项目 | 试一试 |