Bootstrap Flexbox（灵活盒子）

定义和使用

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

灵活的盒子布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。如果您不熟悉 Flex，可以在我们的 CSS Flexbox 教程中阅读有关它的信息。

要创建 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>

尝试一下

输出结果如下：

Flex item 1

Flex item 2

Flex item 3

要创建内联 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 item 1

Flex item 2

Flex item 3

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

如果需要IE8-9支持，请使用 Bootstrap3。Bootstrap3是Bootstrap的最稳定的版本，团队仍然支持它进行重要的错误修正和文档更改。但是，不会添加任何新功能。

水平和垂直方向

使用 .flex-row 可以水平（并排）显示弹性项目；这是默认值。

提示：使用 .flex-row-reverse 可以将水平方向右对齐：

<div class="d-flex flex-row bg-secondary mb-1">
  <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 item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

使用 .flex-column 垂直显示弹性项目（彼此顶部），或使用 .flex-column-reverse 反转垂直方向：

  <div class="d-flex flex-column mb-1">
    <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>

尝试一下

输出结果如下：

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Justify Content 属性

使用 .justify-content- * 类更改弹性项目的对齐方式；有效的类是开始（默认），结束，中心，之间或周围的类：

<div class="d-flex justify-content-start mb-1">...</div>
<div class="d-flex justify-content-end mb-1">...</div>
<div class="d-flex justify-content-center mb-1">...</div>
<div class="d-flex justify-content-between mb-1">...</div>
<div class="d-flex justify-content-around mb-1">...</div>

尝试一下

输出结果如下：

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

填充/等宽

在弹性项目上使用 .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 item 1

Flex item 2

Flex item 3

在弹性项目上使用 .flex-grow-1 可以占用其余空间；在下面的示例中，前两个 flex 项占用其必要的空间，而最后一个 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-shrink-1可以在必要时使其收缩。

输出结果如下：

Flex item 1

Flex item 2

Flex item 3

使用 .order 类更改特定弹性商品的视觉顺序。有效的类是从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（向左推项目）轻松添加自动边距以伸缩项目：

<div class="d-flex bg-secondary mb-1">
  <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 item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

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>

尝试一下

通过更改上面示例框中的弹性项目的包装，单击下面的按钮以查看三个类之间的区别：

输出结果

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

对齐方式

使用 .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（默认）。

<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的类知识，请参考我们的 Bootstrap CSS类参考