Flex

启用弹性行为

使用 display 工具创建一个 flexbox 容器，并将 直接子元素 转换为 flex 项。Flex 容器和项目可以通过额外的 flex 属性进一步修改。

<div class="d-flex p-2">I'm a flexbox container!</div>

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

对于.d-flex和.d-inline-flex也存在响应式变体。

• .d-flex
• .d-inline-flex
• .sm:d-flex
• .sm:d-inline-flex
• .md:d-flex
• .md:d-inline-flex
• .lg:d-flex
• .lg:d-inline-flex
• .xl:d-flex
• .xl:d-inline-flex
• .2xl:d-flex
• .2xl:d-inline-flex

方向

使用方向工具类设置弹性容器中弹性项目的方向。在大多数情况下，你可以省略水平类，因为浏览器的默认值是 row。但是，你可能会遇到需要明确设置此值的情况（例如响应式布局）。

使用 .flex-row 设置水平方向（浏览器默认），或使用 .flex-row-reverse 从相反的一侧开始水平方向。

<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

使用 .flex-column 设置垂直方向，或使用 .flex-column-reverse 从相反侧开始垂直方向。

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

flex-direction也存在响应式变体。

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .sm:flex-row
• .sm:flex-row-reverse
• .sm:flex-column
• .sm:flex-column-reverse
• .md:flex-row
• .md:flex-row-reverse
• .md:flex-column
• .md:flex-column-reverse
• .lg:flex-row
• .lg:flex-row-reverse
• .lg:flex-column
• .lg:flex-column-reverse
• .xl:flex-row
• .xl:flex-row-reverse
• .xl:flex-column
• .xl:flex-column-reverse
• .2xl:flex-row
• .2xl:flex-row-reverse
• .2xl:flex-column
• .2xl:flex-column-reverse

填充

在一系列兄弟元素上使用 .flex-fill 类，可以强制它们的宽度等于其内容（或者如果内容没有超出其边框，则宽度相等），同时占用所有可用的水平空间。

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

flex-fill也存在响应式变体。

• .flex-fill
• .sm:flex-fill
• .md:flex-fill
• .lg:flex-fill
• .xl:flex-fill
• .2xl:flex-fill

增长与收缩

使用 .flex-grow-* 工具类切换 flex 项目填充可用空间的能力。在下面的示例中，.flex-grow-1 元素使用了所有它可以使用的空间，同时允许其余两个 flex 项目拥有它们所需的空间。

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

使用 .flex-shrink-* 工具类在必要时切换 flex 项的收缩能力。在下面的示例中，第二个带有 .flex-shrink-1 的 flex 项被迫将其内容换行，“收缩”以为前一个带有 .w-100 的 flex 项腾出更多空间。

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

对于flex-grow和flex-shrink也存在响应式变体。

• .flex-grow-0
• .flex-grow-1
• .flex-shrink-0
• .flex-shrink-1
• .sm:flex-grow-0
• .sm:flex-grow-1
• .sm:flex-shrink-0
• .sm:flex-shrink-1
• .md:flex-grow-0
• .md:flex-grow-1
• .md:flex-shrink-0
• .md:flex-shrink-1
• .lg:flex-grow-0
• .lg:flex-grow-1
• .lg:flex-shrink-0
• .lg:flex-shrink-1
• .xl:flex-grow-0
• .xl:flex-grow-1
• .xl:flex-shrink-0
• .xl:flex-shrink-1
• .2xl:flex-grow-0
• .2xl:flex-grow-1
• .2xl:flex-shrink-0
• .2xl:flex-shrink-1

包裹

更改弹性容器中弹性项目的换行方式。可以选择完全不换行（浏览器默认）使用 .flex-nowrap，换行使用 .flex-wrap，或反向换行使用 .flex-wrap-reverse。

          <div class="d-flex flex-nowrap">
  ...
</div>
        

          <div class="d-flex flex-wrap">
  ...
</div>
        

          <div class="d-flex flex-wrap-reverse">
  ...
</div>
        

flex-wrap也存在响应式变体。

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .sm:flex-nowrap
• .sm:flex-wrap
• .sm:flex-wrap-reverse
• .md:flex-nowrap
• .md:flex-wrap
• .md:flex-wrap-reverse
• .lg:flex-nowrap
• .lg:flex-wrap
• .lg:flex-wrap-reverse
• .xl:flex-nowrap
• .xl:flex-wrap
• .xl:flex-wrap-reverse
• .2xl:flex-nowrap
• .2xl:flex-wrap
• .2xl:flex-wrap-reverse

CSS

Sass 工具 API

Flexbox 工具在我们的工具 API 中的 scss/_utilities.scss 声明。了解如何使用工具 API。

"flex": (
  responsive: true,
  property: flex,
  values: (fill: 1 1 auto)
),
"flex-direction": (
  responsive: true,
  property: flex-direction,
  class: flex,
  values: row column row-reverse column-reverse
),
"flex-grow": (
  responsive: true,
  property: flex-grow,
  class: flex,
  values: (
    grow-0: 0,
    grow-1: 1,
  )
),
"flex-shrink": (
  responsive: true,
  property: flex-shrink,
  class: flex,
  values: (
    shrink-0: 0,
    shrink-1: 1,
  )
),
"flex-wrap": (
  responsive: true,
  property: flex-wrap,
  class: flex,
  values: wrap nowrap wrap-reverse
),