弹性布局

使用一整套响应式 flexbox 实用程序快速管理网格列、导航、组件等的布局、对齐和大小。对于更复杂的实现,可能需要自定义 CSS。

启用弹性行为

应用 display 实用程序来创建 flexbox 容器并将直接子元素转换为 flex 项。 Flex 容器和项目可以通过额外的 flex 属性进一步修改。

我是一个 flexbox 容器!
<div class="d-flex p-2 border-highlight">我是一个 flexbox 容器!</div>
我是一个内联的 flexbox 容器!
<div class="d-inline-flex p-2 border-highlight">我是一个内联的 flexbox 容器!</div>

.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 项目的方向。在大多数情况下,您可以在此处省略水平类,因为浏览器默认为 row。但是,您可能会遇到需要显式设置此值的情况(例如响应式布局)。

使用 .flex-row 设置水平方向(浏览器默认),或使用 .flex-row-reverse 从另一侧开始水平方向。

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3
<div class="d-flex flex-row border-highlight mb-3">
        <div class="p-2 border-highlight">Flex 项目 1</div>
        <div class="p-2 border-highlight">Flex 项目 2</div>
        <div class="p-2 border-highlight">Flex 项目 3</div>
      </div>
      <div class="d-flex flex-row-reverse border-highlight">
        <div class="p-2 border-highlight">Flex 项目 1</div>
        <div class="p-2 border-highlight">Flex 项目 2</div>
        <div class="p-2 border-highlight">Flex 项目 3</div>
      </div>

使用 .flex-column 设置垂直方向,或使用 .flex-column-reverse 从另一侧开始垂直方向。

Flex 项目 1
Flex 项目 2
Flex 项目 3
Flex 项目 1
Flex 项目 2
Flex 项目 3
<div class="d-flex flex-column border-highlight mb-3">
        <div class="p-2 border-highlight">Flex 项目 1</div>
        <div class="p-2 border-highlight">Flex 项目 2</div>
        <div class="p-2 border-highlight">Flex 项目 3</div>
      </div>
      <div class="d-flex flex-column-reverse border-highlight">
        <div class="p-2 border-highlight">Flex 项目 1</div>
        <div class="p-2 border-highlight">Flex 项目 2</div>
        <div class="p-2 border-highlight">Flex 项目 3</div>
      </div>

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
使...对齐

在 flexbox 容器上使用 justify-content 实用程序来更改 flex 项目在主轴上的对齐方式(x 轴开始,y 轴如果 flex-direction: column)。从start(浏览器默认)、endcenterbetweenaround 或者 evenly

Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex justify-content-start">...</div>
      <div class="d-flex justify-content-end">...</div>
      <div class="d-flex justify-content-center">...</div>
      <div class="d-flex justify-content-between">...</div>
      <div class="d-flex justify-content-around">...</div>
      <div class="d-flex justify-content-evenly">...</div>

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 容器上使用 align-items 实用程序来更改 flex 项目在交叉轴上的对齐方式(y 轴开始,x 轴如果 flex-direction: column)。从 startendcenterbaseline 或者 stretch(浏览器默认)中选择。

Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-items-start">...</div>
      <div class="d-flex align-items-end">...</div>
      <div class="d-flex align-items-center">...</div>
      <div class="d-flex align-items-baseline">...</div>
      <div class="d-flex align-items-stretch">...</div>

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 实用程序来单独更改它们在交叉轴上的对齐方式(y 轴开始,x 轴如果 flex-direction: column)。从与 align-items 相同的选项中进行选择:startendcenterbaseline 或者 stretch(浏览器默认)。

Flex 项目
Aligned flex 项目
Flex 项目
Flex 项目
Aligned flex 项目
Flex 项目
Flex 项目
Aligned flex 项目
Flex 项目
Flex 项目
Aligned flex 项目
Flex 项目
Flex 项目
Aligned flex 项目
Flex 项目
<div class="align-self-start">Aligned flex 项目</div>
      <div class="align-self-end">Aligned flex 项目</div>
      <div class="align-self-center">Aligned flex 项目</div>
      <div class="align-self-baseline">Aligned flex 项目</div>
      <div class="align-self-stretch">Aligned flex 项目</div>

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 类来强制它们的宽度等于它们的内容(或者如果它们的内容不超过它们的边界框,则它们的宽度相等),同时占用所有可用的水平空间。

Flex 项目 有很多内容
Flex 项目
Flex 项目
<div class="d-flex border-highlight">
        <div class="p-2 flex-fill border-highlight">Flex 项目 有很多内容</div>
        <div class="p-2 flex-fill border-highlight">Flex 项目</div>
        <div class="p-2 flex-fill border-highlight">Flex 项目</div>
      </div>

flex-fill 也存在响应变化。

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill
增长和收缩

使用 .flex-grow-* 实用程序来切换弹性项目的增长能力以填充可用空间。在下面的示例中, .flex-grow-1 元素使用了它可以使用的所有可用空间,同时为剩余的两个弹性项目留出了必要的空间。

Flex 项目
Flex 项目
第三个 flex 项目
<div class="d-flex border-highlight">
        <div class="p-2 flex-grow-1 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">第三个 flex 项目</div>
      </div>

如有必要,使用 .flex-shrink-* 实用程序来切换弹性项目的收缩能力。在下面的示例中,带有 .flex-shrink-1 的第二个弹性项目被强制将其内容换行到一个新行,“收缩”以为前一个带有 .w-100 的弹性项目留出更多空间。

Flex 项目
Flex 项目
<div class="d-flex border-highlight">
        <div class="p-2 w-100 border-highlight">Flex 项目</div>
        <div class="p-2 flex-shrink-1 border-highlight">Flex 项目</div>
      </div>

flex-growflex-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
自动边距

当您将 flex 对齐与自动边距混合使用时,Flexbox 可以做一些非常棒的事情。下面显示了通过自动边距控制弹性项目的三个示例:默认(无自动边距)、向右推动两个项目(.me-auto)和向左推动两个项目(.ms-auto)。

Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex border-highlight mb-3">
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
      </div>

      <div class="d-flex border-highlight mb-3">
        <div class="me-auto p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
      </div>

      <div class="d-flex border-highlight mb-3">
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="ms-auto p-2 border-highlight">Flex 项目</div>
      </div>
使用对齐项

通过混合 align-itemsflex-direction: columnmargin-top: automargin-bottom: auto 将一个弹性项目垂直移动到容器的顶部或底部。

Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-items-start flex-column border-highlight mb-3" style="height: 200px;">
        <div class="mb-auto p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
      </div>

      <div class="d-flex align-items-end flex-column border-highlight mb-3" style="height: 200px;">
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="p-2 border-highlight">Flex 项目</div>
        <div class="mt-auto p-2 border-highlight">Flex 项目</div>
      </div>
wrap

更改弹性项目在弹性容器中的包装方式。使用 .flex-nowrap 选择完全不换行(浏览器默认设置)、使用 .flex-wrap 进行换行或使用 .flex-wrap-reverse 进行反向换行。

Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex flex-nowrap">
        ...
      </div>
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex flex-wrap">
        ...
      </div>
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex flex-wrap-reverse">
        ...
      </div>

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 实用程序更改特定弹性项目的视觉顺序。我们只提供最先或最后制作项目的选项,以及重置以使用 DOM 顺序。由于 order 采用 0 到 5 之间的任何整数值,因此为所需的任何其他值添加自定义 CSS。

First flex 项目
Second flex 项目
Third flex 项目
<div class="d-flex flex-nowrap border-highlight">
        <div class="order-3 p-2 border-highlight">First flex 项目</div>
        <div class="order-2 p-2 border-highlight">Second flex 项目</div>
        <div class="order-1 p-2 border-highlight">Third flex 项目</div>
      </div>

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 类,它们分别通过应用 order: -1order: 6 来改变元素的 order

  • .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
对齐内容

在 flexbox 容器上使用 align-content 实用程序将 flex 项在交叉轴上对齐。从 start(浏览器默认)、endcenterbetweenaroundstretch 中选择。为了演示这些实用程序,我们强制执行了 flex-wrap: wrap 并增加了弹性项目的数量。

当心! 此属性对单行弹性项目没有影响。

Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-content-start flex-wrap">
        ...
      </div>
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-content-end flex-wrap">
        ...
      </div>
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-content-center flex-wrap">
        ...
      </div>
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-content-between flex-wrap">
        ...
      </div>
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-content-around flex-wrap">
        ...
      </div>
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
Flex 项目
<div class="d-flex align-content-stretch flex-wrap">
        ...
      </div>

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
媒体对象

想要从 Bootstrap 4 复制媒体对象组件?使用一些 flex 实用程序立即重新创建它,这些实用程序允许比以前更大的灵活性和自定义。

...
《因话录》,唐代汉族文言笔记小说集。本书所记皆唐代事。共6卷,分为5部:卷一宫部为君,记帝王;卷二、卷三商部为臣,记公卿;卷四角部为人,记不仕者,并附以谐戏;卷五征部为事,多记典故;卷六羽部为物,记无所归附的见闻杂事。
<div class="d-flex">
        <div class="flex-shrink-0">
          <img src="images/img-placeholder.png" alt="...">
        </div>
        <div class="flex-grow-1 ms-3">
          《因话录》,唐代汉族文言笔记小说集。本书所记皆唐代事。共6卷,分为5部:卷一宫部为君,记帝王;卷二、卷三商部为臣,记公卿;卷四角部为人,记不仕者,并附以谐戏;卷五征部为事,多记典故;卷六羽部为物,记无所归附的见闻杂事。
        </div>
      </div>

并假设您要将图像旁边的内容垂直居中:

...
《夏商野史》是钟惺创作的中国史类书籍。前十九回叙述夏朝历史,重点比较了圣君贤臣与昏君小人两类角色;后十二回叙述商朝历史,重点描述了周灭商的经过。
<div class="d-flex align-items-center">
        <div class="flex-shrink-0">
          <img src="images/img-placeholder.png" alt="...">
        </div>
        <div class="flex-grow-1 ms-3">
          《夏商野史》是钟惺创作的中国史类书籍。前十九回叙述夏朝历史,重点比较了圣君贤臣与昏君小人两类角色;后十二回叙述商朝历史,重点描述了周灭商的经过。
        </div>
      </div>