Bootstrap 5 Flex 佈局

Flexbox

Bootstrap 3 與 Bootstrap 4 & 5 之間最大的區別在於，Bootstrap 5 現在使用 flexbox 來處理佈局，而不是浮動。

Flexible Box Layout Module，使設計靈活的響應式佈局結構更加容易，無需使用浮動或定位。如果您不熟悉 flex，可以在我們的 CSS Flexbox 教程 中閱讀相關內容。

要建立 flexbox 容器並將直接子元素轉換為 flex 專案，請使用 d-flex 類

要建立內聯 flexbox 容器，請使用 d-inline-flex 類

水平方向

使用 .flex-row 按水平方向（並排）顯示 flex 專案。這是預設設定。

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

垂直方向

使用 .flex-column 按垂直方向（堆疊）顯示 flex 專案，或使用 .flex-column-reverse 來反轉垂直方向

內容對齊

使用 .justify-content-* 類來更改 flex 專案的對齊方式。有效類包括 start（預設）、end、center、between 或 around

填充 / 等寬

在 flex 專案上使用 .flex-fill 來強制它們具有相同的寬度

增長

在 flex 專案上使用 .flex-grow-1 來佔據剩餘空間。在下面的示例中，前兩個 flex 專案佔據它們所需的空間，而最後一個專案佔據所有可用空間。

提示： 在 flex 專案上使用 .flex-shrink-1 使其在需要時收縮。

順序

使用 .order 類來更改特定 flex 專案的視覺順序。有效類從 0 到 5，數字越小優先順序越高（order-1 顯示在 order-2 之前，依此類推）。

自動邊距

使用 .ms-auto（將專案推向右側）或 .me-auto（將專案推向左側）輕鬆地為 flex 專案新增自動邊距。

換行

使用 .flex-nowrap（預設）、.flex-wrap 或 .flex-wrap-reverse 來控制 flex 專案如何在 flex 容器中換行。

點選下面的按鈕，透過更改示例框中 flex 專案的換行來檢視三個類之間的區別

內容對齊

使用 .align-content-* 類控制聚集的 flex 專案的垂直對齊。有效類包括 .align-content-start（預設）、.align-content-end、.align-content-center、.align-content-between、.align-content-around 和 .align-content-stretch。

注意： 這些類對單行 flex 專案無效。

點選下面的按鈕，透過更改示例框中 flex 專案的垂直對齊方式來檢視五個類之間的區別

專案對齊

使用 .align-items-* 類控制單行 flex 專案的垂直對齊。有效類包括 .align-items-start、.align-items-end、.align-items-center、.align-items-baseline 和 .align-items-stretch（預設）。

點選下面的按鈕，檢視五個類之間的區別

自對齊

使用 .align-self-* 類控制特定 flex 專案的垂直對齊。有效類包括 .align-self-start、.align-self-end、.align-self-center、.align-self-baseline 和 .align-self-stretch（預設）。

點選下面的按鈕，檢視五個類之間的區別

響應式 Flex 類

所有 flex 類都帶有附加的響應式類，可以輕鬆地在特定螢幕尺寸上設定特定的 flex 類。

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