Bootstrap4（30）：Flex（彈性）布局



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

一、彈性盒子(flexbox) ：.d-*-flex；.d-*-inline-flex

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">
  <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>

嘗試一下 »

二、水平方向：.flex-*-row；.flex-*-row-reverse

.flex-row 可以設置彈性子元素水平顯示，這是默認的。

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

<div class="d-flex flex-row bg-secondary">
  <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>
 
<div class="d-flex flex-row-reverse bg-secondary">
  <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>

嘗試一下 »

三、垂直方向：.flex-*-column；.flex-*-column-reverse

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

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

嘗試一下 »

四、內容排列：.justify-content-*-start/end/center/between/around

.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

.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>
</div>

嘗試一下 »

六、擴展/收縮：flex-*-grow-0；.flex-*-grow-1；.flex-*-shrink-0；.flex-*-shrink-1

.flex-grow-1 用於設置子元素使用剩下的空間。以下實例中前面兩個子元素只設置了它們所需要的空間，最后一個獲取剩余空間。

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

<div class="d-flex">
  <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-grow-1">Flex item 3</div>
</div>

嘗試一下 »

七、排序：.order-1；.order-2；.order-3

.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>
</div>

嘗試一下 »

八、外邊距：.mr-auto；.ml-auto

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

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

<div class="d-flex bg-secondary">
  <div class="p-2 mr-auto 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>
 
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 ml-auto bg-primary">Flex item 3</div>
</div>

嘗試一下 »

九、包裹：.flex-*-nowrap；.flex-*-wrap；flex-*-wrap-reverse

彈性容器中包裹子元素可以使用以下三個類： .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-*-start/end/center/around/stretch

我們可以使用 .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-*-start/end/center/baseline/stretch

如果要設置單行的子元素對齊可以使用 .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-*-start/end/center/baseline/stretch

如果要設置指定子元素對齊對齊可以使用 .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>
</div>

嘗試一下 »

十三、響應式 flex 類匯總

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

1、彈性容器

• .d-*-flex
  根據不同的屏幕設備創建彈性盒子容器
  嘗試一下
• .d-*-inline-flex
  根據不同的屏幕設備創建行內彈性盒子容器
  嘗試一下

2、方向

• .flex-*-row
  根據不同的屏幕設備在水平方向顯示彈性子元素
  嘗試一下
• .flex-*-row-reverse
  根據不同的屏幕設備在水平方向顯示彈性子元素，且右對齊
  嘗試一下
• .flex-*-column
  根據不同的屏幕設備在垂直方向顯示彈性子元素
  嘗試一下
• .flex-*-column-reverse
  根據不同的屏幕設備在垂直方向顯示彈性子元素，且方向相反
  嘗試一下

3、內容對齊

• .justify-content-*-start
  根據不同屏幕設備在開始位置顯示彈性子元素 (左對齊)
  嘗試一下
• .justify-content-*-end
  根據不同屏幕設備在尾部顯示彈性子元素 (右對齊)
  嘗試一下
• .justify-content-*-center
  根據不同屏幕設備在 flex 容器中居中顯示子元素
  嘗試一下
• .justify-content-*-between
  根據不同屏幕設備使用 "between" 顯示彈性子元素
  嘗試一下
• .justify-content-*-around
  根據不同屏幕設備使用 "around" 顯示彈性子元素
  嘗試一下

4、等寬

• .flex-*-fill
  根據不同的屏幕設備強制等寬
  嘗試一下

5、擴展

• .flex-*-grow-0
  不同的屏幕設備不設置擴展
• .flex-*-grow-1
  不同的屏幕設備設置擴展

6、收縮

• .flex-*-shrink-0
  不同的屏幕設備不設置收縮
• .flex-*-shrink-1
  不同的屏幕設備設置收縮

7、包裹

• .flex-*-nowrap
  不同的屏幕設備不設置包裹元素
  嘗試一下
• .flex-*-wrap
  不同的屏幕設備設置包裹元素
  嘗試一下
• .flex-*-wrap-reverse
  不同的屏幕設備反轉包裹元素
  嘗試一下

8、內容排列

• .align-content-*-start
  根據不同屏幕設備在起始位置堆疊元素
  嘗試一下
• .align-content-*-end
  根據不同屏幕設備在結束位置堆疊元素
  嘗試一下
• .align-content-*-center
  根據不同屏幕設備在中間位置堆疊元素
  嘗試一下
• .align-content-*-around
  根據不同屏幕設備，使用 "around" 堆疊元素
  嘗試一下
• .align-content-*-stretch
  根據不同屏幕設備，通過伸展元素來堆疊
  嘗試一下

9、元素對齊

• .align-items-*-start
  根據不同屏幕設備，讓元素在頭部顯示在同一行。
  嘗試一下
• .align-items-*-end
  根據不同屏幕設備，讓元素在尾部顯示在同一行。
  嘗試一下
• .align-items-*-center
  根據不同屏幕設備，讓元素在中間位置顯示在同一行。
  嘗試一下
• .align-items-*-baseline
  根據不同屏幕設備，讓元素在基線上顯示在同一行。
  嘗試一下
• .align-items-*-stretch
  根據不同屏幕設備，讓元素延展高度並顯示在同一行。
  嘗試一下

10、單獨一個子元素的對齊方式

• .align-self-*-start
  據不同屏幕設備，讓單獨一個子元素顯示在頭部。
  嘗試一下
• .align-self-*-end
  據不同屏幕設備，讓單獨一個子元素顯示在尾部
  嘗試一下
• .align-self-*-center
  據不同屏幕設備，讓單獨一個子元素顯示在居中位置
  嘗試一下
• .align-self-*-baseline
  據不同屏幕設備，讓單獨一個子元素顯示在基線位置
  嘗試一下
• .align-self-*-stretch
  據不同屏幕設備，延展一個單獨子元素
  嘗試一下