Bootstrap 5 Flex

彈性框

Bootstrap 3 和 Bootstrap 4 & 5 的最大區別在于 Bootstrap 5 現在使用 flexbox 而不是浮動來處理布局。

彈性的框布局模塊,可以更輕松地設計彈性響應式布局結構,而無需使用浮動或定位。

如果您不熟悉 flex,可以在我們的 CSS Flexbox 教程 中學習。

注釋:IE9 及更早版本不支持 Flexbox。

注釋:如果您需要 IE8-9 支持,請使用 Bootstrap 3。它是最穩定的 Bootstrap 版本,團隊仍然支持它進行關鍵錯誤修復和文檔更改。但是不會向其中添加任何新功能。

實例

如需創建 flexbox 容器并將直接子項轉換為 flex 項,請使用 d-flex 類:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary">彈性項目 3</div>
</div>

親自試一試

實例

如需創建行內 flexbox 容器,請使用 d-inline-flex 類:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary">彈性項目 3</div>
</div>

親自試一試

水平方向

請使用 .flex-row 水平(并排)顯示彈性項目。這是默認設置。

提示:使用 .flex-row-reverse 可水平方向右對齊:

實例

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary">彈性項目 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary">彈性項目 3</div>
</div>

親自試一試

垂直方向

請使用 .flex-column 垂直顯示 flex 項目(彼此堆疊),或使用 .flex-column-reverse 反轉垂直方向:

實例

<div class="d-flex flex-column">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary">彈性項目 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary">彈性項目 3</div>
</div>

親自試一試

對齊內容

使用 .justify-content-* 類可改變彈性項目的對齊方式。有效的類是::

  • start(默認)
  • end
  • center
  • between
  • around

實例

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

親自試一試

等寬

在 flex 項目上使用 .flex-fill 可強制它們等寬:

實例

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">彈性項目 1</div>
  <div class="p-2 bg-warning flex-fill">彈性項目 2</div>
  <div class="p-2 bg-primary flex-fill">彈性項目 3</div>
</div>

親自試一試

伸展

在 flex 項目上使用 .flex-grow-1 可占用多余的空間。在下面的例子中,前兩個 flex 項目占用了必要的空間,而最后一個項目占用了剩余的可用空間:

實例

<div class="d-flex">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary flex-grow-1">彈性項目 3</div>
</div>

親自試一試

提示:在 flex 項目上使用 .flex-shrink-1 可使其在必要時收縮。

順序

使用 .order 類可更改特定 flex 項的視覺順序。有效的類從 0 到 5,其中最低的數字具有最高的優先級(order-1 顯示在 order-2 之前,以此類推):

實例

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">彈性項目 1</div>
  <div class="p-2 bg-warning order-2">彈性項目 2</div>
  <div class="p-2 bg-primary order-1">彈性項目 3</div>
</div>

親自試一試

自動外邊距

使用 .ms-auto(將項目向右推)或使用 .me-auto(將項目向左推)可輕松地為彈性項目添加自動邊距:

實例

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 bg-primary">彈性項目 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">彈性項目 1</div>
  <div class="p-2 bg-warning">彈性項目 2</div>
  <div class="p-2 me-auto bg-primary">彈性項目 3</div>
</div>

親自試一試

換行

通過 .flex-nowrap(默認)、.flex-wrap.flex-wrap-reverse,可控制 flex 項目如何包裝在 flex 容器中。

實例

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

親自試一試

對齊內容

請使用 .align-content-* 類控制彈性項目的垂直對齊方式。有效的類是:

  • .align-content-start(默認)
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

注釋:這些類對單行彈性項沒有影響。

請單擊下面的按鈕,通過更改實例框中彈性項的垂直對齊方式來查看五個類的區別:

實例

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

親自試一試

對齊項目

請使用 .align-items-* 類控制單行彈性項目的垂直對齊方式。有效的類是:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch(默認)

請單擊下面的按鈕查看五個類之間的區別:

實例

<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-self-* 類控制指定彈性項目的垂直對齊方式。有效的類是:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch(默認)

單擊下面的按鈕查看五個類之間的區別:

實例

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

親自試一試

響應式 Flex 類

所有彈性類都帶有額外的響應類,這使得在特定屏幕尺寸上設置特定 flex 類變得容易。

* 符號可以替換為 sm、md、lg、xl 或 xxl,分別代表小、中、大、超大和特大屏幕。

搜索特定的彈性類 ..

描述 例子
彈性容器
.d-*-flex 為不同的屏幕創建 flexbox 容器。 試一試
.d-*-inline-flex 為不同的屏幕創建行內的 flexbox 容器。 試一試
方向
.flex-*-row 在不同屏幕上水平顯示彈性項目。 試一試
.flex-*-row-reverse 在不同的屏幕上水平和右對齊顯示彈性項目。 試一試
.flex-*-column 在不同屏幕上垂直顯示彈性項目。 試一試
.flex-*-column-reverse 在不同的屏幕屏幕上以相反的順序垂直顯示彈性項目。 試一試
齊行的內容
.justify-content-*-start 在不同屏幕上從開頭(左對齊)顯示彈性項目。 試一試
.justify-content-*-end 在不同屏幕的末尾(右對齊)顯示彈性項目。 試一試
.justify-content-*-center 在不同屏幕的彈性容器中心顯示彈性項目。 試一試
.justify-content-*-between 在不同屏幕上的均等顯示彈性項目。 試一試
.justify-content-*-around 在不同屏幕上“圍繞”顯示彈性項目。 試一試
Fill / 等寬
.flex-*-fill 強制彈性項目在不同屏幕上的寬度相等。 試一試
擴展
.flex-*-grow-0 不要讓項目在不同的屏幕上擴展。
.flex-*-grow-1 使項目在不同的屏幕上擴展。
收縮
.flex-*-shrink-0 不要讓項目在不同屏幕上收縮。
.flex-*-shrink-1 使項目在不同屏幕上收縮。
順序
.order-*-0-12 在小屏幕從 0 到 12 更改順序。 試一試
換行
.flex-*-nowrap 不要在不同的屏幕上對項目換行。 試一試
.flex-*-wrap 在不同的屏幕上對項目換行。 試一試
.flex-*-wrap-reverse 反轉不同屏幕上對項目的換行。 試一試
對齊內容
.align-content-*-start 在不同屏幕上從開頭對齊項目。 試一試
.align-content-*-end 在不同屏幕的末尾對齊項目。 試一試
.align-content-*-center 在不同屏幕的中心對齊項目。 試一試
.align-content-*-around 在不同屏幕的周圍對齊項目。 試一試
.align-content-*-stretch 在不同的屏幕上拉伸項目。 試一試
對齊項目
.align-items-*-start 在不同屏幕上從開頭對齊單行項目。 試一試
.align-items-*-end 在不同屏幕的末尾對齊單行項目。 試一試
.align-items-*-center 在不同屏幕的中心對齊單行項目。 試一試
.align-items-*-baseline 在不同屏幕的基線上對齊單行項目。 試一試
.align-items-*-stretch 在不同屏幕上拉伸單行項目。 試一試
對齊自身
.align-self-*-start 在不同屏幕上從開頭對齊彈性項目。 試一試
.align-self-*-end 在不同屏幕的末尾對齊彈性項目。 試一試
.align-self-*-center 在不同屏幕的中心對齊彈性項目。 試一試
.align-self-*-baseline 在不同屏幕的基線上對齊彈性項目。 試一試
.align-self-*-stretch 在不同屏幕上拉伸彈性項目。 試一試