Bootstrap 4 Flex（彈性）佈局
Bootstrap 4 通過 flex 類來控制頁面的佈局。
彈性盒子(flexbox)
Bootstrap 3 與 Bootstrap 4 最大的區別就是 Bootstrap 4 使用彈性盒子來佈局，而不是使用浮動來佈局。
彈性盒子是 CSS3 的一種新的佈局模式，更適合回應式的設計，如果你還不了解 flex，可以閱讀我們的 CSS3 彈性盒子(Flex Box) 教學
注意：IE9 及其以下版本不支持彈性盒子，所以如果你需要相容 IE8-9，請使用 Bootstrap 3。
以下實例使用 d-flex 類創建一個彈性盒子容器，並設置三個彈性子元素：
實例
創建顯示在同一行上的彈性盒子容器可以使用 d-inline-flex 類:
實例
水準方向
.flex-row 可以設置彈性子元素水準顯示，這是默認的。
使用 .flex-row-reverse 類用於設置右對齊顯示，即與 .flex-row 方向相反。
實例
垂直方向
.flex-column 類用於設置彈性子元素垂直方向顯示, .flex-column-reverse 用於翻轉子元素：
實例
內容排列
.justify-content-* 類用於修改彈性子元素的排列方式，* 號允許的值有：start (默認), end, center, between 或 around:
實例
等寬
.flex-fill 類強制設置各個彈性子元素的寬度是一樣的:
實例
擴展
.flex-grow-1 用於設置子元素使用剩下的空間。以下實例中前面兩個子元素只設置了它們所需要的空間，最後一個獲取剩餘空間。 :
實例
提示: 使用 .flex-shrink-1 用於設置子元素的收縮規則。
排序
.order 類可以設置彈性子元素的排序，從 .order-1 到 .order-12，數字越低權重越高( .order-1 排在 .order-2 之前) :
實例
外邊距
.mr-auto 類可以設置子元素右外邊距為 auto，即 margin-right: auto!important;，.ml-auto 類可以設置子元素左外邊距為 auto，即 margin-left: auto!important;:
實例
包裹
彈性容器中包裹子元素可以使用以下三個類： .flex-nowrap (默認), .flex-wrap 或 .flex-wrap-reverse。設置 flex 容器是單行或者多行。
實例
內容對齊
我們可以使用 .align-content-* 來控制在垂直方向上如何去堆疊子元素，包含的值有：.align-content-start (默認), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
這些類在只有一行的彈性子元素中是無效的。
實例
子元素對齊
如果要設置單行的子元素對齊可以使用 .align-items-* 類來控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默認)。
實例
指定子元素對齊
如果要設置指定子元素對齊對齊可以使用 .align-self-* 類來控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默認)。
實例
回應式 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 |
據不同螢幕設備，延展一個單獨子元素 | |