弹性盒子(Flex)

flexbox弹性盒子通用类别的套件包管理网格栏的排版、对齐、尺寸缩放,以及导览、元件等。对于更复杂的表现则需要自定义CSS。

启用flex

使用display通用类别来创建一个flexbox容器,并将直属的子元素转换为flex属性。增加额外的flex属性,也能够进一步修改flex容器和属性。

I'm a flexbox container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</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的方向,在大多的情况下你可以忽略水平的class,因为浏览器预设值是row。不过有些特定情境下需要特别设定这个值(像是响应式情境)。

使用.flex-row来设定水平的方向(浏览器预设值),或是使用.flex-row-reverse来作水平方向的反转。

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

使用.flex-column设置垂直方向,或者使用.flex-column-reverse作垂直方向的反转。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-column bd-highlight mb-3">
        <div class="p-2 bd-highlight">Flex item 1</div>
        <div class="p-2 bd-highlight">Flex item 2</div>
        <div class="p-2 bd-highlight">Flex item 3</div>
        </div>
        <div class="d-flex flex-column-reverse bd-highlight">
        <div class="p-2 bd-highlight">Flex item 1</div>
        <div class="p-2 bd-highlight">Flex item 2</div>
        <div class="p-2 bd-highlight">Flex item 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轴开始,如果flex-direction: column则为y轴)。从start(浏览器预设),end、center、between、around或evenly中做选择。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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轴开始,如果设定flex-direction: column则为x轴),从start、end、center、baseline或是stretch(浏览器预设)中做选择。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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轴开始,如果设定flex-direction: column,则为x轴)。从与align-items相同的选项中选择:start、end、center、baseline、或是stretch(浏览器预设)。

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
<div class="align-self-start">Aligned flex item</div>
        <div class="align-self-end">Aligned flex item</div>
        <div class="align-self-center">Aligned flex item</div>
        <div class="align-self-baseline">Aligned flex item</div>
        <div class="align-self-stretch">Aligned flex item</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 item with a lot of content
Flex item
Flex item
<div class="d-flex bd-highlight">
        <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
        <div class="p-2 flex-fill bd-highlight">Flex item</div>
        <div class="p-2 flex-fill bd-highlight">Flex item</div>
        </div>

flex-fill同样包含响应式的变化。

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

伸缩值

使用.flex-grow-*通用类别来切换flex项目弹性增长、填充可用空间的能力。在下面的示例中,.flex-grow-1元素使用它可以使用的所有可用空间,同时允许剩余的两个flex物件保留必要的空间。

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

如果需要,使用.flex-shrink-*通用类别来切换项目的缩小能力。在下面的示例中,带有.flex-shrink-1的第二个flex项目的文字内容会被强制换行,”收缩”以允许更多空间用于上一个带有.w-100的flex项目。

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

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

自动边距

当你混用Flex对齐与auto margin时候,Flexbox可以执行一些令人惊艳的功能。下面的示例是透过自动margin来控制flex项目的三个案例:预设(无自动margin),向右推两个项目(.me-auto),并向左推两个项目(.ms-auto)。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex bd-highlight mb-3">
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        </div>
        
        <div class="d-flex bd-highlight mb-3">
        <div class="me-auto p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        </div>
        
        <div class="d-flex bd-highlight mb-3">
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="ms-auto p-2 bd-highlight">Flex item</div>
        </div>

搭配 align-items

混合以下属性align-items、.flex-column,和.mt-auto或.mb-auto,会将一个flex项目移动到容器的顶部或底部。

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

换行

改变Flex项目在Flex容器中换行的方式。可以选择使用.flex-nowrap完全不换行(浏览器预设),使用.flex-wrap进行换行,或使用.flex-wrap-reverse进行反向换行。

Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
        ...
        </div>
        
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap">
        ...
        </div>
        
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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通用类别改变特定flex项目显示的排序。Bootstrap仅提供选项将一个物件排在第一个或最后一个,以及重置以使用DOM排序。由于order只能使用从0到5的整数值,任何额外值则需要自定义的CSS。

First flex item
Second flex item
Third flex item
<div class="d-flex flex-nowrap bd-highlight">
        <div class="order-3 p-2 bd-highlight">First flex item</div>
        <div class="order-2 p-2 bd-highlight">Second flex item</div>
        <div class="order-1 p-2 bd-highlight">Third flex item</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: -1和order: 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(浏览器预设)、end、center、between、around,或stretch中选择。以下为了呈现这通用类别的效果,我们强制执行flex-wrap: wrap并增加了Flex项目的数量。

注意! 此特性对于单行的Flex项目没有作用。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">
        ...
        </div>
        
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>
        
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>
        
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>
        
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>
        
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-stretch flex-wrap">...</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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

媒体对象

要从Bootstrap5复制媒体对象组件吗?用一些flex实用程序很快就可以重新创建它,这些实用程序比以前更加灵活和定制。

Placeholder Image
This is some content from a media component. You can replace this with any content and adjust it as needed.
<div class="d-flex">
        <div class="flex-shrink-0">
        <img src="..." alt="...">
        </div>
        <div class="flex-grow-1 ms-3">
        This is some content from a media component. You can replace this with any content and adjust it as needed.
        </div>
        </div>

And say you want to vertically center the content next to the image:

Placeholder Image
This is some content from a media component. You can replace this with any content and adjust it as needed.
<div class="d-flex align-items-center">
        <div class="flex-shrink-0">
        <img src="..." alt="...">
        </div>
        <div class="flex-grow-1 ms-3">
        This is some content from a media component. You can replace this with any content and adjust it as needed.
        </div>
        </div>

Sass

Utilities API

Flexbox utilities are declared in our utilities API in scss/_utilities.scss.

    "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
        ),
        "gap": (
        responsive: true,
        property: gap,
        class: gap,
        values: $spacers
        ),
        "justify-content": (
        responsive: true,
        property: justify-content,
        values: (
          start: flex-start,
          end: flex-end,
          center: center,
          between: space-between,
          around: space-around,
          evenly: space-evenly,
        )
        ),
        "align-items": (
        responsive: true,
        property: align-items,
        values: (
          start: flex-start,
          end: flex-end,
          center: center,
          baseline: baseline,
          stretch: stretch,
        )
        ),
        "align-content": (
        responsive: true,
        property: align-content,
        values: (
          start: flex-start,
          end: flex-end,
          center: center,
          between: space-between,
          around: space-around,
          stretch: stretch,
        )
        ),
        "align-self": (
        responsive: true,
        property: align-self,
        values: (
          auto: auto,
          start: flex-start,
          end: flex-end,
          center: center,
          baseline: baseline,
          stretch: stretch,
        )
        ),
        "order": (
        responsive: true,
        property: order,
        values: (
          first: -1,
          0: 0,
          1: 1,
          2: 2,
          3: 3,
          4: 4,
          5: 5,
          last: 6,
        ),
        ),
        
返回顶部