弹性盒

Flexbox-Bootstrap 5和Material Design 2.0

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


启用弹性行为

应用 display 实用工具创建一个flexbox容器并进行转换 直接子元素放入弹性项目。可弯曲的容器和物品 可以通过其他柔韧性进行进一步修改。

I'm a flexbox container!

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

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

使用 .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 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 从相反的一侧开始垂直方向。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

          <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
  • .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 实用程序来更改 弯曲主轴上的项目(以x轴为起点,以y轴为起点 flex-direction:column )。从 start (浏览器默认)中选择, end center ween around 均匀

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>
        

Responsive variations also exist for 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轴)。 从开始结束 center 基线, 或 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

自我调整

在弹性框项目上使用 align-self 实用程序可单独更改其对齐方式 在横轴上(要开始的y轴,如果 flex-direction:column ,则为x轴)。选择 与 align-items 相同的选项:开始结束 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">
            <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>
        

Responsive variations also exist for 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 item
Flex item
Third flex item

          <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-shrink-1 的第二个flex项目为 被迫将其内容包装到新行中,“缩小”以为前一行留出更多空间 带有 .w-100 的弹性商品。

Flex item
Flex item

          <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|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 item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

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

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

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

带有对齐项目

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

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

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

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

更改弹性项目在弹性容器中的包装方式。从根本没有包装中选择(浏览器 默认)),使用 .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

订购

更改少数几个弹性项目的 visual 顺序 order 实用程序。我们仅提供将商品放在第一位或最后一位的选项,因为 以及使用DOM顺序的重置。由于 order 取0到0之间的任何整数值 5,添加自定义CSS以获得所需的任何其他值。

First flex item
Second flex item
Third flex item

          <div class="d-flex flex-nowrap">
            <div class="order-3 p-2">First flex item</div>
            <div class="order-2 p-2">Second flex item</div>
            <div class="order-1 p-2">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 order:-1 order: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

对齐内容

在flexbox容器上使用 align-content 实用工具来对齐flex项目 在十字轴上一起。从 start (浏览器默认)中选择, end center ween around stretch 。为了演示这些实用程序,我们执行了 flex-wrap:wrap 并增加了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-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-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