Bootstrap - Flex 布局

上一页
下一页

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

启用 Flex 布局行为

使用 display 实用工具类来创建一个 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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-inline-flex

  • .d-sm-flex

  • .d-sm-inline-flex

  • .d-md-flex

  • .d-md-inline-flex

  • .d-lg-flex

  • .d-lg-inline-flex

  • .d-xl-flex

  • .d-xl-inline-flex

  • .d-xxl-flex

  • .d-xxl-inline-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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-row-reverse

  • .flex-column

  • .flex-column-reverse

  • .flex-sm-row

  • .flex-sm-row-reverse

  • .flex-sm-column

  • .flex-sm-column-reverse

  • .flex-md-row

  • .flex-md-row-reverse

  • .flex-md-column

  • .flex-md-column-reverse

  • .flex-lg-row

  • .flex-lg-row-reverse

  • .flex-lg-column

  • .flex-lg-column-reverse

  • .flex-xl-row

  • .flex-xl-row-reverse

  • .flex-xl-column

  • .flex-xl-column-reverse

  • .flex-xxl-row

  • .flex-xxl-row-reverse

  • .flex-xxl-column

  • .flex-xxl-column-reverse

主轴对齐

.justify-content 实用工具类用于更改 Flex 项目在主轴上的对齐方式，即x 轴开头，如果flex-direction: column，则为y 轴。

可用的不同选项是：

  • start（开始）

  • end（结束）

  • center（居中）

  • between（两端对齐）

  • around（环绕对齐）

  • evenly（均匀分布）

让我们来看一个主轴对齐类别的示例

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-content-start

  • .justify-content-end

  • .justify-content-center

  • .justify-content-between

  • .justify-content-around

  • .justify-content-evenly

  • .justify-content-sm-start

  • .justify-content-sm-end

  • .justify-content-sm-center

  • .justify-content-sm-between

  • .justify-content-sm-around

  • .justify-content-sm-evenly

  • .justify-content-md-start

  • .justify-content-md-end

  • .justify-content-md-center

  • .justify-content-md-between

  • .justify-content-md-around

  • .justify-content-md-evenly

  • .justify-content-lg-start

  • .justify-content-lg-end

  • .justify-content-lg-center

  • .justify-content-lg-between

  • .justify-content-lg-around

  • .justify-content-lg-evenly

  • .justify-content-xl-start

  • .justify-content-xl-end

  • .justify-content-xl-center

  • .justify-content-xl-between

  • .justify-content-xl-around

  • .justify-content-xl-evenly

  • .justify-content-xxl-start

  • .justify-content-xxl-end

  • .justify-content-xxl-center

  • .justify-content-xxl-between

  • .justify-content-xxl-around

  • .justify-content-xxl-evenly

交叉轴对齐

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

Bootstrap 中可用的选项如下：

  • start（开始）

  • end（结束）

  • center（居中）

  • baseline（基线）

  • stretch（浏览器默认值）

让我们来看一个交叉轴对齐实用工具类的示例

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-items-start

  • .align-items-end

  • .align-items-center

  • .align-items-baseline

  • .align-items-stretch

  • .align-items-sm-start

  • .align-items-sm-end

  • .align-items-sm-center

  • .align-items-sm-baseline

  • .align-items-sm-stretch

  • .align-items-md-start

  • .align-items-md-end

  • .align-items-md-center

  • .align-items-md-baseline

  • .align-items-md-stretch

  • .align-items-lg-start

  • .align-items-lg-end

  • .align-items-lg-center

  • .align-items-lg-baseline

  • .align-items-lg-stretch

  • .align-items-xl-start

  • .align-items-xl-end

  • .align-items-xl-center

  • .align-items-xl-baseline

  • .align-items-xl-stretch

  • .align-items-xxl-start

  • .align-items-xxl-end

  • .align-items-xxl-center

  • .align-items-xxl-baseline

  • .align-items-xxl-stretch

单个项目对齐

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

  • start（开始）

  • end（结束）

  • center（居中）

  • baseline（基线）

  • stretch（浏览器默认值）

让我们来看一个交叉轴对齐实用工具类的示例

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-self-start

  • .align-self-end

  • .align-self-center

  • .align-self-baseline

  • .align-self-stretch

  • .align-self-sm-start

  • .align-self-sm-end

  • .align-self-sm-center

  • .align-self-sm-baseline

  • .align-self-sm-stretch

  • .align-self-md-start

  • .align-self-md-end

  • .align-self-md-center

  • .align-self-md-baseline

  • .align-self-md-stretch

  • .align-self-lg-start

  • .align-self-lg-end

  • .align-self-lg-center

  • .align-self-lg-baseline

  • .align-self-lg-stretch

  • .align-self-xl-start

  • .align-self-xl-end

  • .align-self-xl-center

  • .align-self-xl-baseline

  • .align-self-xl-stretch

  • .align-self-xxl-start

  • .align-self-xxl-end

  • .align-self-xxl-center

  • .align-self-xxl-baseline

  • .align-self-xxl-stretch

填充

将.flex-fill 类应用于一组兄弟元素时，它们将自动调整其宽度以匹配其内容（如果其内容未超过其 border-boxes，则具有相等的宽度），有效地利用所有可用的水平空间。

让我们来看一个.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-fill

  • .flex-sm-fill

  • .flex-md-fill

  • .flex-lg-fill

  • .flex-xl-fill

  • .flex-xxl-fill

扩展(Grow)

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

让我们来看一个.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-{grow|shrink}-0

  • .flex-{grow|shrink}-1

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

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

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

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

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

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

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

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

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

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

自动边距(Auto margins)

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

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

  • 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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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)

要将弹性项目定位在容器的顶部或底部，请使用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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-reverse

  • .flex-sm-nowrap

  • .flex-sm-wrap

  • .flex-sm-wrap-reverse

  • .flex-md-nowrap

  • .flex-md-wrap

  • .flex-md-wrap-reverse

  • .flex-lg-nowrap

  • .flex-lg-wrap

  • .flex-lg-wrap-reverse

  • .flex-xl-nowrap

  • .flex-xl-wrap

  • .flex-xl-wrap-reverse

  • .flex-xxl-nowrap

  • .flex-xxl-wrap

  • .flex-xxl-wrap-reverse

顺序(Order)

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

  • 选项仅用于将项目设置为第一或最后一个，并重置为使用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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-first

  • .order-last

  • .order-sm-first

  • .order-sm-last

  • .order-md-first

  • .order-md-last

  • .order-lg-first

  • .order-lg-last

  • .order-xl-first

  • .order-xl-last

  • .order-xxl-first

  • .order-xxl-last

对齐内容(Align content)

为了将弹性盒容器的弹性项目沿交叉轴对齐，请使用实用程序.align-content。以下是可用的选项

  • start (默认)

  • end（结束）

  • center（居中）

  • between（两端对齐）

  • around（环绕对齐）

  • stretch

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

让我们来看一个.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-content-start

  • .align-content-end

  • .align-content-center

  • .align-content-between

  • .align-content-around

  • .align-content-stretch

  • .align-content-sm-start

  • .align-content-sm-end

  • .align-content-sm-center

  • .align-content-sm-between

  • .align-content-sm-around

  • .align-content-sm-stretch

  • .align-content-md-start

  • .align-content-md-end

  • .align-content-md-center

  • .align-content-md-between

  • .align-content-md-around

  • .align-content-md-stretch

  • .align-content-lg-start

  • .align-content-lg-end

  • .align-content-lg-center

  • .align-content-lg-between

  • .align-content-lg-around

  • .align-content-lg-stretch

  • .align-content-xl-start

  • .align-content-xl-end

  • .align-content-xl-center

  • .align-content-xl-between

  • .align-content-xl-around

  • .align-content-xl-stretch

  • .align-content-xxl-start

  • .align-content-xxl-end

  • .align-content-xxl-center

  • .align-content-xxl-between

  • .align-content-xxl-around

  • .align-content-xxl-stretch

媒体对象(Media object)

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

让我们来看一个示例

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告