Bootstrap-Flex

本章讨论 Flex 实用程序。.flex实用程序类有助于快速管理网格列、导航、组件等的布局、对齐和大小。

启用弹性Behave

利用显示实用程序建立 Flexbox 容器并将直接子元素转换为 Flex 项目，从而允许通过附加 Flex 属性进一步自定义 Flex 容器和项目。

让我们看一个 Flex 容器和内联 Flex 容器的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities</h4>
    <div class="d-flex p-4 bg-info">A simple flexbox container!</div>
    <div class="d-inline-flex p-4 bg-warning">An inline flexbox container!</div>
  </body>
</html>

.d-flex和.d-inline-flex类还提供适应不同屏幕尺寸的变体。

.d-flex
.d-内联-flex
.d-sm-flex
.d-sm-内联-flex
.d-md-flex
.d-md-内联-flex
.d-lg-flex
.d-lg-内联-flex
.d-xl-flex
.d-xl-内联-flex
.d-xxl-flex
.d-xxl-内联-flex

方向

使用方向实用程序，您可以设置 Flex 容器中 Flex 项目的方向。以下是 Bootstrap 提供的方向实用程序：

.flex-row - 设置水平方向，这也是浏览器默认的。
.flex-row-reverse - 从另一侧开始水平方向。
.flex-column - 设置垂直方向。
.flex-column-reverse - 从另一侧开始垂直方向。

让我们看一个方向实用程序类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - direction (row & column)</h4>
    <div class="d-flex flex-row mb-4 bg-info border border-dark">
      <div class="p-3 border border-dark">Row One</div>
      <div class="p-3 border border-dark">Row Two</div>
      <div class="p-3 border border-dark">Row Three</div>
    </div>
    <div class="d-flex flex-row-reverse bg-warning border border-success">
      <div class="p-3 border border-success">Row Four</div>
      <div class="p-3 border border-success">Row Five</div>
      <div class="p-3 border border-success">Row Six</div>
    </div>
    <div class="d-flex flex-column mb-3 bg-danger-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column One</div>
      <div class="p-3 border border-dark">Column Two</div>
      <div class="p-3 border border-dark">Column Three</div>
    </div>
    <div class="d-flex flex-column-reverse bg-light border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
    </div>
  </body>
</html>

.flex-direction类还提供了适应不同屏幕尺寸的变体：

.flex-row
.flex-行反转
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-行反转
.flex-sm-柱
.flex-sm-列反转
.flex-md-行
.flex-md-行反转
.flex-md-列
.flex-md-列反转
.flex-lg-行
.flex-lg-行反转
.flex-lg-列
.flex-lg-列反转
.flex-xl-行
.flex-xl-行反转
.flex-xl-列
.flex-xl-列反转
.flex-xxl-行
.flex-xxl-行反向
.flex-xxl-列
.flex-xxl-列反转

证明内容合理

.justify-content实用程序类用于更改主轴上 Flex 项目的对齐方式，即x 轴开始，y 轴（在flex-direction: column的情况下）。

可用的不同选项有：

开始
结尾
中心
之间
大约
均匀地

让我们看一个调整内容类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - Justify content</h4>
    <div class="d-flex justify-content-start mb-4 bg-info border border-dark">
      <div class="p-3 border border-dark">Row One</div>
      <div class="p-3 border border-dark">Row Two</div>
      <div class="p-3 border border-dark">Row Three</div>
    </div>
    <div class="d-flex justify-content-end mb-4 bg-warning border border-success">
      <div class="p-3 border border-success">Row Four</div>
      <div class="p-3 border border-success">Row Five</div>
      <div class="p-3 border border-success">Row Six</div>
    </div>
    <div class="d-flex justify-content-center mb-4 bg-danger-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column One</div>
      <div class="p-3 border border-dark">Column Two</div>
      <div class="p-3 border border-dark">Column Three</div>
    </div>
    <div class="d-flex justify-content-between mb-4 bg-light border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
      </div>
      <div class="d-flex justify-content-around mb-4 bg-success-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
      </div>
      <div class="d-flex justify-content-evenly mb-4 bg-primary-subtle bg-gradient border border-dark">
      <div class="p-3 border border-dark">Column Four</div>
      <div class="p-3 border border-dark">Column Five</div>
      <div class="p-3 border border-dark">Column Six</div>
      </div>
    </div>
  </body>
</html>

.justify-content类还提供了适应不同屏幕尺寸的变体：

.justify-内容-开始
.justify-内容结束
.justify-内容中心
.justify-内容-之间
.justify-内容-周围
.justify-内容-均匀
.justify-内容-sm-start
.justify-内容-sm-end
.justify-内容-sm-中心
.justify-内容-sm-之间
.justify-内容-sm-around
.justify-内容-sm-均匀
.justify-内容-md-start
.justify-内容-md-end
.justify-内容-MD-中心
.justify-内容-md-之间
.justify-内容-md-around
.justify-内容-md-均匀
.justify-内容-lg-start
.justify-内容-lg-end
.justify-内容-lg-中心
.justify-内容-lg-之间
.justify-内容-lg-around
.justify-内容-lg-均匀
.justify-内容-xl-开始
.justify-内容-xl-end
.justify-内容-xl-中心
.justify-内容-xl-之间
.justify-content-xl-around
.justify-content-xl-均匀
.justify-内容-xxl-开始
.justify-内容-xxl-end
.justify-内容-xxl-中心
.justify-内容-xxl-之间
.justify-content-xxl-around
.justify-content-xxl-均匀

对齐项目

为了更改 Flexbox 容器的 Flex 项目的对齐方式，请使用实用程序类align-items。

Bootstrap 中可用的选项如下：

开始
结尾
中心
基线
拉伸（浏览器默认）

让我们看一个对齐项目实用程序类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - align items</h4>
    <div class="d-flex align-items-start flex-row border bg-light mb-4" style="height:150px;">
        <div class="border border-dark p-2 text-bg-success">
            Item 1
        </div>
        <div class="border border-dark p-2 text-bg-primary">
            Item 2
        </div>
        <div class="border border-dark p-2 text-bg-danger">
            Item 3
        </div>
    </div>
    <div class="d-flex align-items-end flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 bg-info-subtle">
            Item 1
        </div>
        <div class="border border-dark p-2 bg-secondary-subtle">
            Item 2
        </div>
        <div class="border border-dark p-2 bg-warning-subtle">
            Item 3
        </div>
    </div>
    <div class="d-flex align-items-center flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 text-bg-info">
            Item 1
        </div>
        <div class="border border-dark p-2 text-bg-secondary">
            Item 2
        </div>
        <div class="border border-dark p-2 text-bg-warning">
            Item 3
    </div>
    </div>
  </body>
</html>

.align-items类还提供了适应不同屏幕尺寸的变体：

.align-项目-开始
.align-items-end
.align-项目中心
.align-items-基线
.align-项目-拉伸
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-基线
.align-items-sm-拉伸
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-基线
.align-items-md-拉伸
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-基线
.align-items-lg-拉伸
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-基线
.align-items-xl-拉伸
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-基线
.align-items-xxl-拉伸

自我对齐

为了更改容器中单个 Flexbox 项目的对齐方式，请使用实用程序类align-self。该实用程序类可用的选项如下：

开始
结尾
中心
基线
拉伸（浏览器默认）

让我们看一个对齐项目实用程序类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - align self</h4>
    <div class="d-flex flex-row border bg-light mb-4" style="height:150px;">
        <div class="border border-dark p-2 text-bg-success">
            Item 1
        </div>
        <div class="align-self-start border border-dark p-2 text-bg-primary">
            align start
        </div>
        <div class="border border-dark p-2 text-bg-danger">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 bg-info-subtle">
            Item 1
        </div>
        <div class="align-self-end border border-dark p-2 bg-secondary-subtle">
            align end
        </div>
        <div class="border border-dark p-2 bg-warning-subtle">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light" style="height:150px;">
        <div class="align-self-center border border-dark p-2 text-bg-info">
            align center
        </div>
        <div class="border border-dark p-2 text-bg-secondary">
            Item 2
        </div>
        <div class="border border-dark p-2 text-bg-warning">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light" style="height:150px;">
        <div class="border border-dark p-2 bg-info-subtle">
            Item 1
        </div>
        <div class="align-self-baseline border border-dark p-2 bg-secondary-subtle">
            align baseline
        </div>
        <div class="border border-dark p-2 bg-warning-subtle">
            Item 3
        </div>
    </div>
    <div class="d-flex flex-row border bg-light mb-4" style="height:150px;">
        <div class="border border-dark p-2 text-bg-success">
            Item 1
        </div>
        <div class="border border-dark p-2 text-bg-primary">
            Item 2
        </div>
        <div class="align-self-stretch border border-dark p-2 text-bg-danger">
            align stretch
        </div>
    </div>
    </div>
  </body>
</html>

.align-self类还提供了适应不同屏幕尺寸的变体：

.align-自启动
.align-self-end
.align-自我居中
.align-自我基线
.align-自拉伸
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-基线
.align-self-sm-拉伸
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-基线
.align-self-md-拉伸
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-基线
.align-自我-lg-拉伸
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-基线
.align-self-xl-拉伸
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-基线
.align-self-xxl-拉伸

充满

当将.flex-fill类应用于一组同级元素时，它们将自动调整宽度以匹配其内容（或者如果其内容不超过其边框，则具有相同的宽度），从而有效地利用所有可用的水平空间。

让我们看一个.flex-fill类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - flex-fill</h4>
    <div class="d-flex border border-dark bg-danger-subtle">
      <div class="p-2 border border-dark flex-fill">Flex item showing a longer string of text.</div>
      <div class="p-2 border border-dark flex-fill">Item</div>
      <div class="p-2 border border-dark flex-fill">Flex Item 3</div>
    </div>
    </div>
  </body>
</html>

.flex-fill类还提供了适应不同屏幕尺寸的变体：

.flex-填充
.flex-sm-填充
.flex-md-填充
.flex-lg-填充
.flex-xl-填充
.flex-xxl-填充

生长

您可以利用.flex-grow-*实用程序类来控制 Flex 项目是否应扩展以占用可用空间。

让我们看一个.flex-grow类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - flex-grow</h4>
      <div class="d-flex border border-dark bg-danger-subtle">
        <div class="p-2 border border-dark">Flex item</div>
        <div class="p-2 flex-grow-1 border border-dark">Flex</div>
        <div class="p-2 border border-dark">Third flex item</div>
      </div>
    </div>
  </body>
</html>

收缩

如果需要，您可以利用.flex-shrink-*实用程序类来控制 Flex 项目是否应缩小。

让我们看一个.flex-shrink类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - flex-shrink</h4>
      <div class="d-flex border border-dark bg-danger-subtle">
        <div class="p-2 border border-dark w-100">Flex item taking up all the space</div>
        <div class="p-2 border border-dark flex-shrink-1">Flex item shrink</div>
      </div>
    </div>
  </body>
</html>

.flex-grow和.flex-shrink类也有适应不同屏幕尺寸的变体：

.flex-{增长|收缩}-0
.flex-{增长|收缩}-1
.flex-sm-{增长|收缩}-0
.flex-sm-{增长|收缩}-1
.flex-md-{增长|收缩}-0
.flex-md-{增长|收缩}-1
.flex-lg-{增长|收缩}-0
.flex-lg-{增长|收缩}-1
.flex-xl-{增长|收缩}-0
.flex-xl-{增长|收缩}-1
.flex-xxl-{增长|收缩}-0
.flex-xxl-{增长|收缩}-1

自动边距

您可以将弹性对齐方式与自动边距混合使用。

以下类可与自动边距一起使用：

me-auto - 将弹性项目推到最右边。
ms-auto - 将弹性项目推到最左边。
默认情况下没有自动保证金。

让我们看一个自动保证金类别的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - auto margin</h4>
      <div class="d-flex mb-3 bg-primary-subtle">
        <div class="p-2 border border-dark">No margin</div>
        <div class="p-2 border border-dark">No margin</div>
        <div class="p-2 border border-dark">No margin</div>
      </div>
      <div class="d-flex mb-3 bg-warning-subtle">
        <div class="me-auto p-2 border border-dark">Right margin</div>
        <div class="p-2 border border-dark">Right margin</div>
        <div class="p-2 border border-dark">Right margin</div>
      </div>
      <div class="d-flex mb-3 bg-danger-subtle">
        <div class="p-2 border border-dark">Left margin</div>
        <div class="p-2 border border-dark">Left margin</div>
        <div class="ms-auto p-2 border border-dark">Left margin</div>
      </div>
    </div>
  </body>
</html>

使用对齐项目

要将弹性项目放置在容器的顶部或底部，请使用align-items、flex-direction:column和margin-top:auto或margin-bottom:auto进行垂直调整。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Flex utilities - with align items</h4>
    <div class="d-flex align-items-start flex-column mb-3 text-bg-success border border-dark" style="height: 200px;">
      <div class="mb-auto p-2 border border-dark">Align to left</div>
      <div class="p-2 border border-dark">Align to left</div>
      <div class="p-2 border border-dark">Align to left</div>
    </div>
    <div class="d-flex align-items-end flex-column mb-3 text-bg-warning border border-dark" style="height: 200px;">
      <div class="p-2 border border-dark">Align to right</div>
      <div class="p-2 border border-dark">Align to right</div>
      <div class="mt-auto p-2 border border-dark">Align to right</div>
    </div>
    </div>
  </body>
</html>

在上面的示例中，mt-auto表示margin-top: auto，mb-auto表示margin-bottom: auto。

裹

柔性容器的柔性物品可以被包裹。以下是可用于包装 Flex 项目的实用程序类：

.flex-nowrap - 根本不包装（默认）。
.flex-wrap - 用于包装弹性项目。
.flex-wrap-reverse - 用于柔性项目的反向包装。

让我们看一个.flex-nowrap类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - no wrap</h4>
    <div class="d-flex flex-nowrap text-bg-success border border-dark">
      <div class="p-2 border border-dark">Flex Item 1</div>
      <div class="p-2 border border-dark">Flex Item 2</div>
      <div class="p-2 border border-dark">Flex Item 3</div>
      <div class="p-2 border border-dark">Flex Item 4</div>
      <div class="p-2 border border-dark">Flex Item 5</div>
      <div class="p-2 border border-dark">Flex Item 6</div>
    </div>
    </div>
  </body>
</html>

让我们看一个.flex-wrap类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - wrap items</h4>
    <div class="d-flex flex-wrap text-bg-success border border-dark">
      <div class="p-2 border border-dark">Wrap Flex Item 1</div>
      <div class="p-2 border border-dark">Wrap Flex Item 2</div>
      <div class="p-2 border border-dark">Wrap Flex Item 3</div>
      <div class="p-2 border border-dark">Wrap Flex Item 4</div>
      <div class="p-2 border border-dark">Wrap Flex Item 5</div>
      <div class="p-2 border border-dark">Wrap Flex Item 6</div>
      <div class="p-2 border border-dark">Wrap Flex Item 7</div>
      <div class="p-2 border border-dark">Wrap Flex Item 8</div>
      <div class="p-2 border border-dark">Wrap Flex Item 9</div>
      <div class="p-2 border border-dark">Wrap Flex Item 10</div>
      <div class="p-2 border border-dark">Wrap Flex Item 11</div>
      <div class="p-2 border border-dark">Wrap Flex Item 12</div>
    </div>
    </div>
  </body>
</html>

让我们看一个.flex-wrap-reverse类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - wrap reverse items</h4>
    <div class="d-flex flex-wrap-reverse text-bg-success border border-dark">
      <div class="p-2 border border-dark">Wrap reverse Item 1</div>
      <div class="p-2 border border-dark">Wrap reverse Item 2</div>
      <div class="p-2 border border-dark">Wrap reverse Item 3</div>
      <div class="p-2 border border-dark">Wrap reverse Item 4</div>
      <div class="p-2 border border-dark">Wrap reverse Item 5</div>
      <div class="p-2 border border-dark">Wrap reverse Item 6</div>
      <div class="p-2 border border-dark">Wrap reverse Item 7</div>
      <div class="p-2 border border-dark">Wrap reverse Item 8</div>
      <div class="p-2 border border-dark">Wrap reverse Item 9</div>
      <div class="p-2 border border-dark">Wrap reverse Item 10</div>
      <div class="p-2 border border-dark">Wrap reverse Item 11</div>
      <div class="p-2 border border-dark">Wrap reverse Item 12</div>
    </div>
    </div>
  </body>
</html>

.flex-wrap类还提供了适应不同屏幕尺寸的变体：

.flex-nowrap
.flex-wrap
.flex-wrap-反向
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-反向
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-反向
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-反向
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-反向

命令

使用顺序实用程序，您可以更改特定弹性项目的视觉顺序。

该选项仅可用于将项目放在第一个或最后一个，并重置以使用 DOM 顺序。
order取从0到5的整数值
。

让我们看一下.order类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-5">
    <h4>Flex utilities - order change</h4>
    <div class="d-flex flex-nowrap text-bg-danger border border-dark">
      <div class="order-4 p-3 border border-dark">Item one</div>
      <div class="order-1 p-3 border border-dark">Item two</div>
      <div class="order-2 p-3 border border-dark">Item three</div>
      <div class="order-5 p-3 border border-dark">Item four</div>
      <div class="order-3 p-3 border border-dark">Item five</div>
      <div class="order-0 p-3 border border-dark">Item six</div>
    </div>
    </div>
  </body>
</html>

.order类还提供了适应不同屏幕尺寸的变体：

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

此外，还有名为.order-first和.order-last 的类，它们是响应式的，并通过分别为元素分配-1和6的顺序来修改元素的序列。

.顺序优先
.最后订购
.order-sm-first
.order-sm-最后
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-最后
.order-xxl-first
.order-xxl-最后

对齐内容

为了在横轴上将 Flexbox 容器的 Flex 项目对齐在一起，请使用实用程序.align-content。以下是可用的选项：

开始（默认）
结尾
中心
之间
大约
拉紧

我们启用了flex-wrap:wrap属性并添加了更多 Flex 项目来展示这些实用程序的功能。

让我们看一个.align-content-*类的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
    <h4>Flex utilities - align content</h4>
    <!--align-content-start-->
    <div class="d-flex flex-column bd-highlight text-bg-info mb-3 flex-wrap align-content-start">
        <div class="border p-2 bd-highlight">
            Flex item 1 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 
        </div>
    </div>
    <!--align-content-center-->
    <div class="d-flex flex-column bd-highlight text-bg-warning mb-3 flex-wrap align-content-center">
        <div class="border p-2 bd-highlight">
            Flex item 1 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 
        </div>
    </div>
    <!--align-content-end-->
    <div class="d-flex flex-column bd-highlight text-bg-danger mb-3 flex-wrap align-content-end">
      <div class="border p-2 bd-highlight">
          Flex item 1 
      </div>
      <div class="border p-2 bd-highlight">
          Flex item 2 
      </div>
      <div class="border p-2 bd-highlight">
          Flex item 3 
      </div>
    </div>
    <!--align-content-stretch-->
    <div class="d-flex flex-column bd-highlight text-bg-primary mb-3 flex-wrap align-content-stretch">
      <div class="border p-2 bd-highlight">
        Flex item 1 
      </div>
      <div class="border p-2 bd-highlight">
        Flex item 2 
      </div>
      <div class="border p-2 bd-highlight">
        Flex item 3 
      </div>
    </div>
  </div>
  </body>
</html>

.align-content类还提供了适应不同屏幕尺寸的变体：

.align-内容-开始
.align-内容结束
.align-内容中心
.align-内容-之间
.align-内容-周围
.align-内容拉伸
.align-内容-sm-开始
.align-内容-sm-end
.align-内容-sm-中心
.align-内容-sm-之间
.align-内容-sm-around
.align-内容-sm-拉伸
.align-内容-md-start
.align-内容-md-end
.align-内容-md-center
.align-内容-md-之间
.align-内容-md-around
.align-内容-md-拉伸
.align-内容-lg-开始
.align-内容-lg-end
.align-内容-lg-中心
.align-内容-lg-之间
.align-内容-lg-around
.align-内容-lg-拉伸
.align-内容-xl-开始
.align-内容-xl-end
.align-内容-xl-中心
.align-内容-xl-之间
.align-内容-xl-around
.align-内容-xl-拉伸
.align-内容-xxl-开始
.align-内容-xxl-end
.align-内容-xxl-中心
.align-内容-xxl-之间
.align-content-xxl-around
.align-内容-xxl-拉伸

媒体对象

您可以使用一些比以前提供更多灵活性和选项的 Flex 实用程序轻松快速地重新创建媒体对象组件。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Flex</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h4>Flex utilities - Media object</h4>
    </div>
    <div class="d-flex align-items-center border mx-4 w-50 mt-3">
      <div class="flex-md-shrink-0">
        <img src="https://i1.wp.com/simplesnippets.tech/wp-content/uploads/2018/07/tutorialspoint.jpg?resize=500%2C500&ssl=1">
      </div>
      <div class="flex-md-grow-1">
      Content related to the image is placed at the center of the image, as we have used the class .align-items-center. The image is the logo of "Tutorials Point".
    </div>
    </div>
  </body>
</html>