Bootstrap5 Flex（彈性）布局

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

創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元布爾津做網(wǎng)站,已為上家服務(wù),為布爾津各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

彈性盒子(flexbox)

Bootstrap 3 與 Bootstrap 4/5 最大的區(qū)別就是 Bootstrap 4/5 使用彈性盒子來布局，而不是使用浮動(dòng)來布局。

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

注意：IE9 及其以下版本不支持彈性盒子，所以如果你需要兼容 IE8-9，請(qǐng)使用 Bootstrap 3。

以下實(shí)例使用 d-flex 類創(chuàng)建一個(gè)彈性盒子容器，并設(shè)置三個(gè)彈性子元素：

實(shí)例

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

嘗試一下 ?

創(chuàng)建顯示在同一行上的彈性盒子容器可以使用 d-inline-flex 類:

實(shí)例

<
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 可以設(shè)置彈性子元素水平顯示，這是默認(rèn)的。

使用 .flex-row-reverse 類用于設(shè)置右對(duì)齊顯示，即與 .flex-row 方向相反。

實(shí)例

<
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 類用于設(shè)置彈性子元素垂直方向顯示, .flex-column-reverse 用于翻轉(zhuǎn)子元素：

實(shí)例

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

嘗試一下 ?

內(nèi)容排列

.justify-content-* 類用于修改彈性子元素的排列方式，* 號(hào)允許的值有：start (默認(rèn)), end, center, between 或 around:

實(shí)例

<
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 類強(qiáng)制設(shè)置各個(gè)彈性子元素的寬度是一樣的:

實(shí)例

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

嘗試一下 ?

擴(kuò)展

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

實(shí)例

<
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 用于設(shè)置子元素的收縮規(guī)則。

排序

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

實(shí)例

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

嘗試一下 ?

外邊距

.ms-auto 類可以設(shè)置子元素右外邊距為 auto，即 margin-right: auto!important;，.me-auto 類可以設(shè)置子元素左外邊距為 auto，即 margin-left: auto!important;:

實(shí)例

<
div

class
=
"
d-flex mb-3 bg-secondary
"
>

<
div

class
=
"
p-2 ms-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 mb-3 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 me-auto bg-primary
"
>
Flex item 3
div
>

div
>

嘗試一下 ?

包裹

彈性容器中包裹子元素可以使用以下三個(gè)類： .flex-nowrap (默認(rèn)), .flex-wrap 或 .flex-wrap-reverse。設(shè)置 flex 容器是單行或者多行。

實(shí)例

<
div

class
=
"
d-flex flex-wrap
"
>
..
div
>

<
div

class
=
"
d-flex flex-wrap-reverse
"
>
..
div
>

<
div

class
=
"
d-flex flex-nowrap
"
>
..
div
>

嘗試一下 ?

內(nèi)容對(duì)齊

我們可以使用 .align-content-* 來控制在垂直方向上如何去堆疊子元素，包含的值有：.align-content-start (默認(rèn)), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。

這些類在只有一行的彈性子元素中是無效的。

實(shí)例

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

嘗試一下 ?

子元素對(duì)齊

如果要設(shè)置單行的子元素對(duì)齊可以使用 .align-items-* 類來控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默認(rèn))。

實(shí)例

<
div

class
=
"
d-flex align-items-start
"
>
..
div
>

<
div

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

<
div

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

<
div

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

<
div

class
=
"
d-flex align-items-stretch
"
>
..
div
>

嘗試一下 ?

指定子元素對(duì)齊

如果要設(shè)置指定子元素對(duì)齊對(duì)齊可以使用 .align-self-* 類來控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默認(rèn))。

實(shí)例

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

嘗試一下 ?

響應(yīng)式 flex 類

我們可以根據(jù)不同的設(shè)備，設(shè)置 flex 類，從而實(shí)現(xiàn)頁面響應(yīng)式布局，以下表格中的 * 號(hào)可以的值有：sm, md, lg 或 xl, 對(duì)應(yīng)的是小型設(shè)備、中型設(shè)備，大型設(shè)備，超大型設(shè)備。

類	實(shí)例	實(shí)現(xiàn)
彈性容器
.d-*-flex	根據(jù)不同的屏幕設(shè)備創(chuàng)建彈性盒子容器	嘗試一下
.d-*-inline-flex	根據(jù)不同的屏幕設(shè)備創(chuàng)建行內(nèi)彈性盒子容器	嘗試一下
方向
.flex-*-row	根據(jù)不同的屏幕設(shè)備在水平方向顯示彈性子元素	嘗試一下
.flex-*-row-reverse	根據(jù)不同的屏幕設(shè)備在水平方向顯示彈性子元素，且右對(duì)齊	嘗試一下
.flex-*-column	根據(jù)不同的屏幕設(shè)備在垂直方向顯示彈性子元素	嘗試一下
.flex-*-column-reverse	根據(jù)不同的屏幕設(shè)備在垂直方向顯示彈性子元素，且方向相反	嘗試一下
內(nèi)容對(duì)齊
.justify-content-*-start	根據(jù)不同屏幕設(shè)備在開始位置顯示彈性子元素 (左對(duì)齊)	嘗試一下
.justify-content-*-end	根據(jù)不同屏幕設(shè)備在尾部顯示彈性子元素 (右對(duì)齊)	嘗試一下
.justify-content-*-center	根據(jù)不同屏幕設(shè)備在 flex 容器中居中顯示子元素	嘗試一下
.justify-content-*-between	根據(jù)不同屏幕設(shè)備使用 "between" 顯示彈性子元素	嘗試一下
.justify-content-*-around	根據(jù)不同屏幕設(shè)備使用 "around" 顯示彈性子元素	嘗試一下
等寬
.flex-*-fill	根據(jù)不同的屏幕設(shè)備強(qiáng)制等寬	嘗試一下
擴(kuò)展
.flex-*-grow-0	不同的屏幕設(shè)備不設(shè)置擴(kuò)展
.flex-*-grow-1	不同的屏幕設(shè)備設(shè)置擴(kuò)展
收縮
.flex-*-shrink-0	不同的屏幕設(shè)備不設(shè)置收縮
.flex-*-shrink-1	不同的屏幕設(shè)備設(shè)置收縮
包裹
.flex-*-nowrap	不同的屏幕設(shè)備不設(shè)置包裹元素	嘗試一下
.flex-*-wrap	不同的屏幕設(shè)備設(shè)置包裹元素	嘗試一下
.flex-*-wrap-reverse	不同的屏幕設(shè)備反轉(zhuǎn)包裹元素	嘗試一下
內(nèi)容排列
.align-content-*-start	根據(jù)不同屏幕設(shè)備在起始位置堆疊元素	嘗試一下
.align-content-*-end	根據(jù)不同屏幕設(shè)備在結(jié)束位置堆疊元素	嘗試一下
.align-content-*-center	根據(jù)不同屏幕設(shè)備在中間位置堆疊元素	嘗試一下
.align-content-*-around	根據(jù)不同屏幕設(shè)備，使用 "around" 堆疊元素	嘗試一下
.align-content-*-stretch	根據(jù)不同屏幕設(shè)備，通過伸展元素來堆疊	嘗試一下
排序
.order-*-0-12	在小屏幕尺寸上修改排序	嘗試一下
元素對(duì)齊
.align-items-*-start	根據(jù)不同屏幕設(shè)備，讓元素在頭部顯示在同一行。	嘗試一下
.align-items-*-end	根據(jù)不同屏幕設(shè)備，讓元素在尾部顯示在同一行。	嘗試一下
.align-items-*-center	根據(jù)不同屏幕設(shè)備，讓元素在中間位置顯示在同一行。	嘗試一下
.align-items-*-baseline	根據(jù)不同屏幕設(shè)備，讓元素在基線上顯示在同一行。	嘗試一下
.align-items-*-stretch	根據(jù)不同屏幕設(shè)備，讓元素延展高度并顯示在同一行。	嘗試一下
單獨(dú)一個(gè)子元素的對(duì)齊方式
.align-self-*-start	據(jù)不同屏幕設(shè)備，讓單獨(dú)一個(gè)子元素顯示在頭部。	嘗試一下
.align-self-*-end	據(jù)不同屏幕設(shè)備，讓單獨(dú)一個(gè)子元素顯示在尾部	嘗試一下
.align-self-*-center	據(jù)不同屏幕設(shè)備，讓單獨(dú)一個(gè)子元素顯示在居中位置	嘗試一下
.align-self-*-baseline	據(jù)不同屏幕設(shè)備，讓單獨(dú)一個(gè)子元素顯示在基線位置	嘗試一下
.align-self-*-stretch	據(jù)不同屏幕設(shè)備，延展一個(gè)單獨(dú)子元素	嘗試一下

文章標(biāo)題：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5Flex（彈性）布局
網(wǎng)站URL：http://www.5511xx.com/article/cdscdee.html