Bootstrap/docs/4.5/utilities/flex

在GitHub上查看

Flex

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

启用弹性行为

应用 display 创建flexbox容器并进行转换的实用程序 直接子元素 变成弹性物品。 Flex容器和项目可以通过其他flex属性进行进一步修改。

我是一个flexbox容器！

<div class="d-flex p-2 bd-highlight"> 我是一个flexbox容器！ </div>

我是嵌入式Flexbox容器！

<div class="d-inline-flex p-2 bd-highlight"> 我是嵌入式Flexbox容器！ </div>

对于 .d-flex and .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

方向

使用方向实用程序在flex容器中设置flex项目的方向。 在大多数情况下,您可以在此处省略水平类,因为浏览器的默认值为 row 。但是,您可能会遇到需要显式设置此值的情况（例如响应式布局）。

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

弹性项目1

弹性项目2

弹性项目3

弹性项目1

弹性项目2

弹性项目3

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

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

弹性项目1

弹性项目2

弹性项目3

弹性项目1

弹性项目2

弹性项目3

<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight"> 弹性项目1 </div>
<div class="p-2 bd-highlight"> 弹性项目2 </div>
<div class="p-2 bd-highlight"> 弹性项目3 </div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight"> 弹性项目1 </div>
<div class="p-2 bd-highlight"> 弹性项目2 </div>
<div class="p-2 bd-highlight"> 弹性项目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

证明内容合理

Use justify-content flexbox容器上的实用程序可更改弹性项目在主轴上的对齐方式（要开始的x轴,如果是,则为y轴） flex-direction: column ). 从中选择 start （浏览器默认）, end,center,between , or around.

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex justify-content-start bd-highlight mb-3">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex justify-content-end bd-highlight mb-3">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex justify-content-center bd-highlight mb-3">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex justify-content-between bd-highlight mb-3">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex justify-content-around bd-highlight">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

对于 justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

对齐项目

Use align-items flexbox容器上的实用程序可更改弹性项目在横轴上的对齐方式（要开始的y轴,如果是,则x轴 flex-direction: column ). 从中选择 start,end,center,baseline , or stretch （浏览器默认）。

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex align-items-stretch bd-highlight" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</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

自我调整

Use align-self flexbox项上的实用程序可单独更改其在横轴（开始的y轴,x轴,如果 flex-direction: column ). 从与以下选项相同的选项中进行选择 align-items:start,end,center,baseline , or stretch （浏览器默认）。

弹性项目

对齐的弹性项目

弹性项目

弹性项目

对齐的弹性项目

弹性项目

弹性项目

对齐的弹性项目

弹性项目

弹性项目

对齐的弹性项目

弹性项目

弹性项目

对齐的弹性项目

弹性项目

<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="align-self-start p-2 bd-highlight"> 对齐的弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="align-self-end p-2 bd-highlight"> 对齐的弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="align-self-center p-2 bd-highlight"> 对齐的弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="align-self-baseline p-2 bd-highlight"> 对齐的弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex bd-highlight" style="height: 100px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="align-self-stretch p-2 bd-highlight"> 对齐的弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</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

Fill

使用 .flex-fill 一系列同级元素上的class强制它们的宽度等于其内容的宽度（如果它们的内容未超过其边框,则等于宽度）,同时占用所有可用的水平空间。

内容丰富的项目

弹性项目

弹性项目

<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight"> 内容丰富的项目 </div>
<div class="p-2 flex-fill bd-highlight"> 弹性项目 </div>
<div class="p-2 flex-fill bd-highlight"> 弹性项目 </div>
</div>

对于 flex-fill.

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

成长与收缩

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

弹性项目

弹性项目

第三弹性项目

<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 第三弹性项目 </div>
</div>

Use .flex-shrink-* 实用程序,可在必要时切换弹性项目的收缩功能。 在下面的示例中,第二个弹性项目 .flex-shrink-1 被迫将其内容包装到新行中,“缩小”以为前一个弹性项目留出更多空间, .w-100.

弹性项目

弹性项目

<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight"> 弹性项目 </div>
<div class="p-2 flex-shrink-1 bd-highlight"> 弹性项目 </div>
</div>

对于 flex-grow and 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对齐方式与自动边距混合使用时,Flexbox可以做一些很棒的事情。 下面显示了通过自动边距控制弹性项目的三个示例：默认（无自动边距）,向右推两个项目（ .mr-auto ）,然后向左推两个项目（ .ml-auto ).

不幸的是,IE10和IE11不能正确支持其父项具有非默认值的弹性项目的自动页边距 justify-content 值。 查看此StackOverflow答案 更多细节。

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="ml-auto p-2 bd-highlight"> 弹性项目 </div>
</div>

带有对齐项目

通过混合将一个伸缩项目垂直移动到容器的顶部或底部 align-items,flex-direction: column ,和 margin-top: auto or margin-bottom: auto.

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

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

Wrap

更改弹性项目在弹性容器中的包装方式。 从根本没有换行（浏览器默认）中选择 .flex-nowrap ,用 .flex-wrap ,或使用 .flex-wrap-reverse.

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex flex-wrap bd-highlight">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex flex-wrap-reverse bd-highlight">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</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

订购

改变 视觉的 特定弹性项目的顺序 order 公用事业。 我们仅提供用于使项目成为第一项或最后一项的选项,以及提供重置以使用DOM顺序的选项。 As order 取任何整数值（例如, 5 ）,为所需的任何其他值添加自定义CSS。

第一个弹性项目

第二弹性项目

第三弹性项目

<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight"> 第一个弹性项目 </div>
<div class="order-2 p-2 bd-highlight"> 第二弹性项目 </div>
<div class="order-1 p-2 bd-highlight"> 第三弹性项目 </div>
</div>

对于 order.

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

对齐内容

Use align-content flexbox容器上的实用程序以对齐弹性项目 一起 在横轴上。 从中选择 start （浏览器默认）, end,center,between,around , or stretch 。为了演示这些实用程序,我们强制执行 flex-wrap: wrap 并增加了弹性商品的数量。

当心！ 此属性对弹性项目的单行无效。

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

弹性项目

<div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
<div class="p-2 bd-highlight"> 弹性项目 </div>
</div>

对于 align-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch