Bootstrap 简明教程

Bootstrap - Flex

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

This chapter discusses about the flex utilities. The .flex utility classes are helpful in quickly managing the layout, alignment and sizing of grid columns, navigation, components and much more.

Enable flex behaviors

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

Utilize display utilities to establish a flexbox container and convert immediate child elements into flex items, allowing for further customization of flex containers and items through additional flex properties.

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

Let us see an example for a flex container and an inline flex container:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the classes .d-flex and .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 提供的方向工具：

Using the direction utilities, you can set the direction of flex items in a flex container. Following are the direction utilities provided by Bootstrap:

  1. .flex-row - to set a horizontal direction, which is also the browser default.

  2. .flex-row-reverse - to start the horizontal direction from the opposite side.

  3. .flex-column - to set a vertical direction.

  4. .flex-column-reverse - to start the vertical direction from the opposite side.

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

Let us see an example for the direction utility classes:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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 的情况。

The .justify-content utility classes are used to change the alignment of flex items on the main axis, i.e. x -axis to start, and y-axis in case of flex-direction: column.

可用的不同选项有：

The different options available are:

  1. start

  2. end

  3. center

  4. between

  5. around

  6. evenly

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

Let us see an example for the justify content classes:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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. 工具类。

In order to change the alignment of flex items of a flexbox container, use the utility class align-items.

Bootstrap 中可用的选项如下：

The options available in Bootstrap are as follows:

  1. start

  2. end

  3. center

  4. baseline

  5. stretch (browser default)

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

Let us see an example for the align items utility class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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 工具类。此工具类可用的选项如下：

In order to change the alignment of an individual flexbox item in a container, use the utility class align-self. The options available for this utility class are as follows:

  1. start

  2. end

  3. center

  4. baseline

  5. stretch (browser default)

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

Let us see an example for the align items utility class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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 类应用到一组兄弟元素时，它们会自动调整宽度以匹配内容（如果内容未超出其边框盒，则宽度相同），有效利用所有可用的水平空间。

When applying the .flex-fill class to a group of sibling elements, they will automatically adjust their widths to match their content (or have equal widths if their content does not exceed their border-boxes), effectively utilizing all the horizontal space available.

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

Let us see an example for the .flex-fill class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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 项是否应扩展以占据可用空间。

You can utilize the .flex-grow-* utility classes to control whether a flex item should expand to occupy the available space.

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

Let us see an example of .flex-grow class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 项是否应按需要进行收缩。

You can utilize the .flex-shrink-* utility classes to control whether a flex item should shrunk, if required.

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

Let us see an example of .flex-shrink class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the classes .flex-grow and .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 对齐与自动边距混合。

You can mix flex alignments with auto margins.

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

Following classes can be used with auto margins:

  1. me-auto - pushes the flex items to extreme right.

  2. ms-auto - pushes the flex items to extreme left.

  3. No auto margin is default.

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

Let us see an example for auto margin classes:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 来进行垂直调整。

To position a flex item at the top or bottom of a container, utilize align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto in order to make vertical adjustments.

我们看一个示例：

Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

In the above example, mt-auto means margin-top: auto and mb-auto means margin-bottom: auto.

Wrap

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

The flex items of flex container can be wrapped. Following are the utility classes that can be used to wrap the flex items:

  1. .flex-nowrap - for no wrapping at all (default).

  2. .flex-wrap - for wrapping of flex items.

  3. .flex-wrap-reverse - for reverse wrapping of flex items.

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

Let us see an example for .flex-nowrap class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Let us see an example for .flex-wrap class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Let us see an example for .flex-wrap-reverse class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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 项目的可视顺序。

Using order utilities, you can change the visual order of specific flex items.

  1. Option is available only to make an item first or last, and reset to utilize the DOM order.

  2. order takes integer value starting from 0 to 5 .

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

Let us see an example for the .order class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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 的顺序，修改元素的顺序。

In addition, there are also classes called .order-first and .order-last that are responsive and modify the sequence of an element by assigning it an order of -1 and 6, respectively.

  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 实用程序。以下为可用的选项：

In order to align flex items of a flexbox container together on the cross axis, use the utility .align-content. Following are the options available:

  1. start (default)

  2. end

  3. center

  4. between

  5. around

  6. stretch

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

We have enabled the flex-wrap: wrap property and added more flex items to showcase the functionality of these utilities.

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

Let us see an example for the .align-content-* classes:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Variations that adapt to different screen sizes are also available for the class .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 实用程序，即可轻松快速地重新创建媒体对象组件。

You can recreate the media object component easily and quickly by using a few flex utilities that provide more flexibility and options than before.

我们看一个示例：

Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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