top
Loading...
Bootstrap 4 Flex(彈性)布局

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 類創建一個彈性盒子容器,併設置三個彈性子元素:

實例

<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 方向相反。

實例

<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 用於翻轉子元素:

實例

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

實例

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

嘗試一下 »

擴展

.flex-grow-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>

嘗試一下 »

提示: 使用 .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> </div>

嘗試一下 »

外邊距

.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 容器是單行或者多行。

實例

<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-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-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, 對應的是小型設備、中型設備,大型設備,超大型設備。
實例 實現
彈性容器
.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 據不同屏幕設備,延展一個單獨子元素 嘗試一下
北斗有巢氏 有巢氏北斗