Flex
彈性框
Bootstrap 3 和 Bootstrap 4 & 5 的最大區(qū)別在于 Bootstrap 5 現(xiàn)在使用 flexbox 而不是浮動來處理布局。
彈性的框布局模塊，可以更輕松地設(shè)計彈性響應(yīng)式布局結(jié)構(gòu)，而無需使用浮動或定位。
如果您不熟悉 flex，可以在我們的 CSS Flexbox 教程 中學(xué)習(xí)。
注釋：IE9 及更早版本不支持 Flexbox。
注釋：如果您需要 IE8-9 支持，請使用 Bootstrap 3。它是最穩(wěn)定的 Bootstrap 版本，團(tuán)隊仍然支持它進(jìn)行關(guān)鍵錯誤修復(fù)和文檔更改。但是不會向其中添加任何新功能。
實例
如需創(chuàng)建 flexbox 容器并將直接子項轉(zhuǎn)換為 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>
實例
如需創(chuàng)建行內(nèi) 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 水平（并排）顯示彈性項目。這是默認(rèn)設(shè)置。
提示：使用 .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 反轉(zhuǎn)垂直方向：
實例
<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>
對齊內(nèi)容
使用 .justify-content-* 類可改變彈性項目的對齊方式。有效的類是：：
start（默認(rèn)）endcenterbetweenaround
實例
<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，其中最低的數(shù)字具有最高的優(yōu)先級（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（默認(rèn)）、.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>
對齊內(nèi)容
請使用 .align-content-* 類控制彈性項目的垂直對齊方式。有效的類是：
.align-content-start（默認(rèn)）.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch
注釋：這些類對單行彈性項沒有影響。
請單擊下面的按鈕，通過更改實例框中彈性項的垂直對齊方式來查看五個類的區(qū)別：
實例
<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（默認(rèn)）
請單擊下面的按鈕查看五個類之間的區(qū)別：
實例
<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（默認(rèn)）
單擊下面的按鈕查看五個類之間的區(qū)別：
實例
<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>
響應(yīng)式 Flex 類
所有彈性類都帶有額外的響應(yīng)類，這使得在特定屏幕尺寸上設(shè)置特定 flex 類變得容易。
* 符號可以替換為 sm、md、lg、xl 或 xxl，分別代表小、中、大、超大和特大屏幕。
搜索特定的彈性類 ..
| 類 | 描述 | 例子 |
|---|---|---|
| 彈性容器 | ||
.d-*-flex |
為不同的屏幕創(chuàng)建 flexbox 容器。 | 試一試 |
.d-*-inline-flex |
為不同的屏幕創(chuàng)建行內(nèi)的 flexbox 容器。 | 試一試 |
| 方向 | ||
.flex-*-row |
在不同屏幕上水平顯示彈性項目。 | 試一試 |
.flex-*-row-reverse |
在不同的屏幕上水平和右對齊顯示彈性項目。 | 試一試 |
.flex-*-column |
在不同屏幕上垂直顯示彈性項目。 | 試一試 |
.flex-*-column-reverse |
在不同的屏幕屏幕上以相反的順序垂直顯示彈性項目。 | 試一試 |
| 齊行的內(nèi)容 | ||
.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 |
反轉(zhuǎn)不同屏幕上對項目的換行。 | 試一試 |
| 對齊內(nèi)容 | ||
.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 |
在不同屏幕上拉伸彈性項目。 | 試一試 |