Bootstrap 简明教程

Bootstrap - Flex

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

Enable flex behaviors

利用 display 实用程序建立一个 flexbox 容器并将直接子元素转换为 flex 项，允许通过其他 flex 属性进一步自定义 flex 容器和项。

让我们看一个灵活容器和一个行内灵活容器的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 也提供了适用于不同屏幕大小的变量。

  1. .d-flex

  2. .d-inline-flex

  3. .d-sm-flex

  4. .d-sm-inline-flex

  5. .d-md-flex

  6. .d-md-inline-flex

  7. .d-lg-flex

  8. .d-lg-inline-flex

  9. .d-xl-flex

  10. .d-xl-inline-flex

  11. .d-xxl-flex

  12. .d-xxl-inline-flex

Direction

使用方向工具，可以设置灵活容器中灵活项的方向。以下是 Bootstrap 提供的方向工具：

  1. .flex-row - 设置水平方向，这也是浏览器的默认设置。

  2. .flex-row-reverse - 从相反的侧边开始水平方向。

  3. .flex-column - 设置垂直方向。

  4. .flex-column-reverse - 从相反的侧边开始垂直方向。

让我们看一个方向工具类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 也提供了适用于不同屏幕大小的变量：

  1. .flex-row

  2. .flex-row-reverse

  3. .flex-column

  4. .flex-column-reverse

  5. .flex-sm-row

  6. .flex-sm-row-reverse

  7. .flex-sm-column

  8. .flex-sm-column-reverse

  9. .flex-md-row

  10. .flex-md-row-reverse

  11. .flex-md-column

  12. .flex-md-column-reverse

  13. .flex-lg-row

  14. .flex-lg-row-reverse

  15. .flex-lg-column

  16. .flex-lg-column-reverse

  17. .flex-xl-row

  18. .flex-xl-row-reverse

  19. .flex-xl-column

  20. .flex-xl-column-reverse

  21. .flex-xxl-row

  22. .flex-xxl-row-reverse

  23. .flex-xxl-column

  24. .flex-xxl-column-reverse

Justify content

.justify-content 工具类用于更改主轴上灵活项的对齐方式，即 x -axis 为起始， y-axis 为 flex-direction: column 的情况。

可用的不同选项有：

  1. start

  2. end

  3. center

  4. between

  5. around

  6. evenly

让我们看一个对齐内容类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 也提供了适用于不同屏幕大小的变量：

  1. .justify-content-start

  2. .justify-content-end

  3. .justify-content-center

  4. .justify-content-between

  5. .justify-content-around

  6. .justify-content-evenly

  7. .justify-content-sm-start

  8. .justify-content-sm-end

  9. .justify-content-sm-center

  10. .justify-content-sm-between

  11. .justify-content-sm-around

  12. .justify-content-sm-evenly

  13. .justify-content-md-start

  14. .justify-content-md-end

  15. .justify-content-md-center

  16. .justify-content-md-between

  17. .justify-content-md-around

  18. .justify-content-md-evenly

  19. .justify-content-lg-start

  20. .justify-content-lg-end

  21. .justify-content-lg-center

  22. .justify-content-lg-between

  23. .justify-content-lg-around

  24. .justify-content-lg-evenly

  25. .justify-content-xl-start

  26. .justify-content-xl-end

  27. .justify-content-xl-center

  28. .justify-content-xl-between

  29. .justify-content-xl-around

  30. .justify-content-xl-evenly

  31. .justify-content-xxl-start

  32. .justify-content-xxl-end

  33. .justify-content-xxl-center

  34. .justify-content-xxl-between

  35. .justify-content-xxl-around

  36. .justify-content-xxl-evenly

Align items

为了更改一个灵活盒容器中灵活项的对齐方式，请使用 align-items. 工具类。

Bootstrap 中可用的选项如下：

  1. start

  2. end

  3. center

  4. baseline

  5. stretch (browser default)

让我们看一个对齐项工具类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 也提供了适用于不同屏幕大小的变量：

  1. .align-items-start

  2. .align-items-end

  3. .align-items-center

  4. .align-items-baseline

  5. .align-items-stretch

  6. .align-items-sm-start

  7. .align-items-sm-end

  8. .align-items-sm-center

  9. .align-items-sm-baseline

  10. .align-items-sm-stretch

  11. .align-items-md-start

  12. .align-items-md-end

  13. .align-items-md-center

  14. .align-items-md-baseline

  15. .align-items-md-stretch

  16. .align-items-lg-start

  17. .align-items-lg-end

  18. .align-items-lg-center

  19. .align-items-lg-baseline

  20. .align-items-lg-stretch

  21. .align-items-xl-start

  22. .align-items-xl-end

  23. .align-items-xl-center

  24. .align-items-xl-baseline

  25. .align-items-xl-stretch

  26. .align-items-xxl-start

  27. .align-items-xxl-end

  28. .align-items-xxl-center

  29. .align-items-xxl-baseline

  30. .align-items-xxl-stretch

Align self

为了更改一个容器中单个灵活盒项的对齐方式，请使用 align-self 工具类。此工具类可用的选项如下：

  1. start

  2. end

  3. center

  4. baseline

  5. stretch (browser default)

让我们看一个对齐项工具类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 也提供了适用于不同屏幕大小的变量：

  1. .align-self-start

  2. .align-self-end

  3. .align-self-center

  4. .align-self-baseline

  5. .align-self-stretch

  6. .align-self-sm-start

  7. .align-self-sm-end

  8. .align-self-sm-center

  9. .align-self-sm-baseline

  10. .align-self-sm-stretch

  11. .align-self-md-start

  12. .align-self-md-end

  13. .align-self-md-center

  14. .align-self-md-baseline

  15. .align-self-md-stretch

  16. .align-self-lg-start

  17. .align-self-lg-end

  18. .align-self-lg-center

  19. .align-self-lg-baseline

  20. .align-self-lg-stretch

  21. .align-self-xl-start

  22. .align-self-xl-end

  23. .align-self-xl-center

  24. .align-self-xl-baseline

  25. .align-self-xl-stretch

  26. .align-self-xxl-start

  27. .align-self-xxl-end

  28. .align-self-xxl-center

  29. .align-self-xxl-baseline

  30. .align-self-xxl-stretch

Fill

将 .flex-fill 类应用到一组兄弟元素时，它们会自动调整宽度以匹配内容（如果内容未超出其边框盒，则宽度相同），有效利用所有可用的水平空间。

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

  1. .flex-fill

  2. .flex-sm-fill

  3. .flex-md-fill

  4. .flex-lg-fill

  5. .flex-xl-fill

  6. .flex-xxl-fill

Grow

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

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

Shrink

您可以利用 .flex-shrink- * 实用程序类来控制 flex 项是否应按需要进行收缩。

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

  1. .flex-{grow|shrink}-0

  2. .flex-{grow|shrink}-1

  3. .flex-sm-{grow|shrink}-0

  4. .flex-sm-{grow|shrink}-1

  5. .flex-md-{grow|shrink}-0

  6. .flex-md-{grow|shrink}-1

  7. .flex-lg-{grow|shrink}-0

  8. .flex-lg-{grow|shrink}-1

  9. .flex-xl-{grow|shrink}-0

  10. .flex-xl-{grow|shrink}-1

  11. .flex-xxl-{grow|shrink}-0

  12. .flex-xxl-{grow|shrink}-1

Auto margins

您可以将 flex 对齐与自动边距混合。

可以使用以下类与自动边距结合使用：

  1. me-auto - 将 flex 项推至极右侧。

  2. ms-auto - 将 flex 项推至极左侧。

  3. 默认情况下没有自动边距。

让我们看自动边距类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

With align-items

要将 flex 项定位在容器的顶部或底部，请使用 align-items, flex-direction: column ，以及 margin-top: auto 或 margin-bottom: auto 来进行垂直调整。

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

Wrap

可以包装 flex 容器中的 flex 项。以下是可以用于包装 flex 项的实用程序类：

  1. .flex-nowrap - 无包装（默认）。

  2. .flex-wrap - 换行包装 flex 项。

  3. .flex-wrap-reverse - 用于灵活项目反向包裹。

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 类：

  1. .flex-nowrap

  2. .flex-wrap

  3. .flex-wrap-reverse

  4. .flex-sm-nowrap

  5. .flex-sm-wrap

  6. .flex-sm-wrap-reverse

  7. .flex-md-nowrap

  8. .flex-md-wrap

  9. .flex-md-wrap-reverse

  10. .flex-lg-nowrap

  11. .flex-lg-wrap

  12. .flex-lg-wrap-reverse

  13. .flex-xl-nowrap

  14. .flex-xl-wrap

  15. .flex-xl-wrap-reverse

  16. .flex-xxl-nowrap

  17. .flex-xxl-wrap

  18. .flex-xxl-wrap-reverse

Order

使用 order 实用程序，可更改特定 flex 项目的可视顺序。

  1. 此选项仅可用于让项目成为第一个或最后一个，以及重置以利用 DOM 顺序。

  2. order 接受从 0 到 5 的整数值。

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 类：

  1. .order-0

  2. .order-1

  3. .order-2

  4. .order-3

  5. .order-4

  6. .order-5

  7. .order-sm-0

  8. .order-sm-1

  9. .order-sm-2

  10. .order-sm-3

  11. .order-sm-4

  12. .order-sm-5

  13. .order-md-0

  14. .order-md-1

  15. .order-md-2

  16. .order-md-3

  17. .order-md-4

  18. .order-md-5

  19. .order-lg-0

  20. .order-lg-1

  21. .order-lg-2

  22. .order-lg-3

  23. .order-lg-4

  24. .order-lg-5

  25. .order-xl-0

  26. .order-xl-1

  27. .order-xl-2

  28. .order-xl-3

  29. .order-xl-4

  30. .order-xl-5

  31. .order-xxl-0

  32. .order-xxl-1

  33. .order-xxl-2

  34. .order-xxl-3

  35. .order-xxl-4

  36. .order-xxl-5

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

  1. .order-first

  2. .order-last

  3. .order-sm-first

  4. .order-sm-last

  5. .order-md-first

  6. .order-md-last

  7. .order-lg-first

  8. .order-lg-last

  9. .order-xl-first

  10. .order-xl-last

  11. .order-xxl-first

  12. .order-xxl-last

Align content

为了在交叉轴上将 flexbox 容器的 flex 项目对齐，请使用 .align-content 实用程序。以下为可用的选项：

  1. start (default)

  2. end

  3. center

  4. between

  5. around

  6. stretch

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

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 类：

  1. .align-content-start

  2. .align-content-end

  3. .align-content-center

  4. .align-content-between

  5. .align-content-around

  6. .align-content-stretch

  7. .align-content-sm-start

  8. .align-content-sm-end

  9. .align-content-sm-center

  10. .align-content-sm-between

  11. .align-content-sm-around

  12. .align-content-sm-stretch

  13. .align-content-md-start

  14. .align-content-md-end

  15. .align-content-md-center

  16. .align-content-md-between

  17. .align-content-md-around

  18. .align-content-md-stretch

  19. .align-content-lg-start

  20. .align-content-lg-end

  21. .align-content-lg-center

  22. .align-content-lg-between

  23. .align-content-lg-around

  24. .align-content-lg-stretch

  25. .align-content-xl-start

  26. .align-content-xl-end

  27. .align-content-xl-center

  28. .align-content-xl-between

  29. .align-content-xl-around

  30. .align-content-xl-stretch

  31. .align-content-xxl-start

  32. .align-content-xxl-end

  33. .align-content-xxl-center

  34. .align-content-xxl-between

  35. .align-content-xxl-around

  36. .align-content-xxl-stretch

Media object

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

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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