Bootstrap 4 Flex

Bootstrap 4 彈性佈局

使用 flex 類來控制 Bootstrap 4 元件的佈局。

Flexbox

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

Flexible Box Layout Module，無需使用 float 或 positioning 即可更輕鬆地設計靈活的響應式佈局結構。如果您不熟悉 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 到 12，數字越小優先順序越高（order-1 顯示在 order-2 之前，依此類推）

自動邊距

使用 .mr-auto（將專案推到右側）或使用 .ml-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，分別代表小、中、大或超大螢幕。