Bootstrap4 Flex（彈性）布局

Bootstrap4 通過 flex 類來控制頁面的布局。

彈性盒子(flexbox)

Bootstrap 3 與 Bootstrap 4 最大的差別就是 Bootstrap 4 使用彈性盒子來布局，而不是使用浮動來布局。

彈性盒子是 CSS3 的一種新的布局模式，更适合響應式的設計，如果你還不了解 flex，可以閱讀我們的 CSS3 彈性盒子(Flex Box) 教程

注意：IE9 及其以下版本不支援彈性盒子，是以如果你需要相容 IE8-9，請使用 Bootstrap 3。

以下執行個體使用 d-flex 類建立一個彈性盒子容器，并設定三個彈性子元素：

執行個體

<div class="d-flex p-3 bg-secondary text-white">

<div class="p-2 bg-info">Flex item 1</div>

<div class="p-2 bg-warning">Flex item 2</div>

<div class="p-2 bg-primary">Flex item 3</div>

</div>

建立顯示在同一行上的彈性盒子容器可以使用 d-inline-flex 類:

<div class="d-inline-flex p-3 bg-secondary text-white">

水準方向

.flex-row 可以設定彈性子元素水準顯示，這是預設的。

使用 .flex-row-reverse 類用于設定右對齊顯示，即與 .flex-row 方向相反。

<div class="d-flex flex-row bg-secondary">

<div class="d-flex flex-row-reverse bg-secondary">

垂直方向

.flex-column 類用于設定彈性子元素垂直方向顯示, .flex-column-reverse 用于翻轉子元素：

<div class="d-flex flex-column">

<div class="d-flex flex-column-reverse">

内容排列

.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-fill 類強制設定各個彈性子元素的寬度是一樣的:

<div class="d-flex">

<div class="p-2 bg-info flex-fill">Flex item 1</div>

<div class="p-2 bg-warning flex-fill">Flex item 2</div>

<div class="p-2 bg-primary flex-fill">Flex item 3</div>

擴充

.flex-grow-1 用于設定子元素使用剩下的空間。以下執行個體中前面兩個子元素隻設定了它們所需要的空間，最後一個擷取剩餘空間。 :

<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>

提示: 使用 .flex-shrink-1 用于設定子元素的收縮規則。

排序

.order 類可以設定彈性子元素的排序，從 .order-1 到 .order-12，數字越低權重越高( .order-1 排在 .order-2 之前) :

<div class="d-flex bg-secondary">

<div class="p-2 bg-info order-3">Flex item 1</div>

<div class="p-2 bg-warning order-2">Flex item 2</div>

<div class="p-2 bg-primary order-1">Flex item 3</div>

外邊距

.mr-auto 類可以設定子元素右外邊距為 auto，即 margin-right: auto!important;，.ml-auto 類可以設定子元素左外邊距為 auto，即 margin-left: auto!important;:

<div class="p-2 mr-auto bg-info">Flex item 1</div>

<div class="p-2 ml-auto bg-primary">Flex item 3</div>

包裹

彈性容器中包裹子元素可以使用以下三個類： .flex-nowrap (預設), .flex-wrap 或 .flex-wrap-reverse。設定 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 flex-wrap align-items-start">..</div>

<div class="d-flex flex-wrap align-items-end">..</div>

<div class="d-flex flex-wrap align-items-center">..</div>

<div class="d-flex flex-wrap align-items-around">..</div>

<div class="d-flex flex-wrap 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>

響應式 flex 類

我們可以根據不同的裝置，設定 flex 類，進而實作頁面響應式布局，以下表格中的 * 号可以的值有：sm, md, lg 或 xl, 對應的是小型裝置、中型裝置，大型裝置，超大型裝置。

類		實作
彈性容器
.d-*-flex	根據不同的螢幕裝置建立彈性盒子容器
.d-*-inline-flex	根據不同的螢幕裝置建立行内彈性盒子容器
方向
.flex-*-row	根據不同的螢幕裝置在水準方向顯示彈性子元素
.flex-*-row-reverse	根據不同的螢幕裝置在水準方向顯示彈性子元素，且右對齊
.flex-*-column	根據不同的螢幕裝置在垂直方向顯示彈性子元素
.flex-*-column-reverse	根據不同的螢幕裝置在垂直方向顯示彈性子元素，且方向相反
.justify-content-*-start	根據不同螢幕裝置在開始位置顯示彈性子元素 (左對齊)
.justify-content-*-end	根據不同螢幕裝置在尾部顯示彈性子元素 (右對齊)
.justify-content-*-center	根據不同螢幕裝置在 flex 容器中居中顯示子元素
.justify-content-*-between	根據不同螢幕裝置使用 "between" 顯示彈性子元素
.justify-content-*-around	根據不同螢幕裝置使用 "around" 顯示彈性子元素
.flex-*-fill	根據不同的螢幕裝置強制等寬
.flex-*-grow-0	不同的螢幕裝置不設定擴充
.flex-*-grow-1	不同的螢幕裝置設定擴充
收縮
.flex-*-shrink-0	不同的螢幕裝置不設定收縮
.flex-*-shrink-1	不同的螢幕裝置設定收縮
.flex-*-nowrap	不同的螢幕裝置不設定包裹元素
.flex-*-wrap	不同的螢幕裝置設定包裹元素
.flex-*-wrap-reverse	不同的螢幕裝置反轉包裹元素
.align-content-*-start	根據不同螢幕裝置在起始位置堆疊元素
.align-content-*-end	根據不同螢幕裝置在結束位置堆疊元素
.align-content-*-center	根據不同螢幕裝置在中間位置堆疊元素
.align-content-*-around	根據不同螢幕裝置，使用 "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	據不同螢幕裝置，延展一個單獨子元素