模塊3

Bootstrap5頁面彈性

布局設(shè)計3.1Flexbox概述【驗證示例3-1】使用.d-flex類創(chuàng)建一個彈性容器，并設(shè)置3個彈性子元素【示例代碼】<divclass="containermt-3"><divclass="d-flexp-3bg-secondarytext-white"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div></div>圖3-1【驗證示例3-1】的顯示效果3.1Flexbox概述【驗證示例3-2】使用.d-inline-flex類創(chuàng)建行內(nèi)彈性容器【示例代碼】<divclass="containermt-3"><divclass="d-inline-flexp-3bg-secondarytext-white"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div></div>圖3-2【驗證示例3-2】的顯示效果3.2設(shè)置彈性元素的水平顯示方向【驗證示例3-3】使用.flex-row和.flex-row-reverse類設(shè)置彈性元素的水平顯示方向【示例代碼】<divclass="containermt-3"><p>彈性元素從左到右水平顯示</p><divclass="d-flexflex-rowbg-secondarymb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div><p>彈性元素從右到左水平顯示</p><divclass="d-flexflex-row-reversebg-secondary"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div></div>圖3-3【驗證示例3-3】的顯示效果3.3設(shè)置彈性元素的垂直顯示方向【驗證示例3-4】使用.flex-column和.flex-column-reverse類設(shè)置彈性元素的垂直顯示方向【示例代碼】<divclass="containermt-3"><p>彈性元素從上到下垂直顯示</p><divclass="d-flexflex-columnmb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div><p>彈性元素從下到上垂直顯示</p><divclass="d-flexflex-column-reverse"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div></div>圖3-4【驗證示例3-4】的顯示效果3.4設(shè)置彈性元素的水平對齊方式在Bootstrap5中，可以使用.justify-content-*類來改變彈性元素的水平對齊方式。以下是可用的.justify-content-*類及其作用。.justify-content-start：將彈性元素左對齊（默認值）。.justify-content-end：將彈性元素右對齊。.justify-content-center：將彈性元素居中對齊。.justify-content-between：將彈性元素均勻分布在容器內(nèi)，左右兩端沒有空白。.justify-content-around：將彈性元素均勻分布在容器內(nèi)，左右兩端有寬度相等的空白。可以根據(jù)需要選擇適當(dāng)?shù)?justify-content-*類來實現(xiàn)所需的對齊效果。3.4設(shè)置彈性元素的水平對齊方式【驗證示例3-5】使用不同的.justify-content-*類改變彈性元素的水平對齊方式【示例代碼】<divclass="containermt-3"><divclass="d-flexjustify-content-startbg-secondarymb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div><divclass="d-flexjustify-content-endbg-secondarymb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div><divclass="d-flexjustify-content-centerbg-secondarymb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div><divclass="d-flexjustify-content-betweenbg-secondarymb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div><divclass="d-flexjustify-content-aroundbg-secondarymb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div></div>圖3-5【驗證示例3-5】的顯示效果3.5設(shè)置彈性元素等寬【驗證示例3-6】使用.flex-fill類設(shè)置各個彈性元素等寬【示例代碼】<divclass="containermt-3"><divclass="d-flex"><divclass="p-2bg-infoflex-fill">彈性元素1</div><divclass="p-2bg-warningflex-fill">彈性元素2</div><divclass="p-2bg-primaryflex-fill">彈性元素3</div></div></div>圖3-6【驗證示例3-6】的顯示效果3.6擴展彈性元素占用剩下的可用空間【驗證示例3-7】使用.flex-grow-1類擴展彈性元素占用剩下的可用空間【示例代碼】<divclass="containermt-3"><p>擴展</p><divclass="d-flexmb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2flex-grow-1bg-primary">彈性元素3</div></div><p>不擴展</p><divclass="d-flexmb-3bg-secondary"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div></div>圖3-7【驗證示例3-7】的顯示效果3.7設(shè)置彈性元素的排列順序【驗證示例3-8】使用.order類設(shè)置彈性元素的排序【示例代碼】<divclass="containermt-3"><divclass="d-flexbg-secondarymb-3"><divclass="p-2bg-infoorder-3">彈性元素1</div><divclass="p-2bg-warningorder-2">彈性元素2</div><divclass="p-2bg-primaryorder-1">彈性元素3</div></div></div>圖3-8【驗證示例3-8】的顯示效果3.8為彈性元素添加自動外邊距在Bootstrap5中，可以使用.ms-auto類和.me-auto類為彈性元素添加自動外邊距，它們分別表示margin-start:auto和margin-end:auto。1．使用.ms-auto類設(shè)置彈性元素右外邊距為auto使用.ms-auto類可以設(shè)置彈性元素右外邊距為auto，將彈性元素向右推，即margin-right:auto!important。2．使用.me-auto類設(shè)置彈性元素左外邊距為auto使用.me-auto類可以設(shè)置彈性元素左外邊距為auto，將彈性元素向左推，即margin-left:auto!important。3.8為彈性元素添加自動外邊距【驗證示例3-9】使用.ms-auto類和.me-auto類為彈性元素添加自動外邊距【示例代碼】<divclass="containermt-3"><divclass="d-flexbg-secondarymb-3"><divclass="p-2ms-autobg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2bg-primary">彈性元素3</div></div><br><divclass="d-flexbg-secondarymb-3"><divclass="p-2bg-info">彈性元素1</div><divclass="p-2bg-warning">彈性元素2</div><divclass="p-2me-autobg-primary">彈性元素3</div></div></div>圖3-9【驗證示例3-9】的顯示效果3.9設(shè)置彈性容器中彈性元素的包裹方式在Bootstrap5中，彈性容器中包裹彈性元素可以使用以下3個類：.flex-nowrap（默認）、.flex-wrap或.flex-wrap-reverse。這3個類用于設(shè)置彈性容器中彈性元素的包裹方式，設(shè)置彈性容器是單行還是多行。1．.flex-nowrap類.flex-nowrap是默認值，它表示所有彈性元素將放在一行上，不會自動換行。2．.flex-wrap類.flex-wrap表示彈性元素將被包裹成多行。如果需要，彈性元素將向下自動換行，并盡可能占滿所有可用的垂直空間。3．.flex-wrap-reverse類.flex-wrap-reverse與.flex-wrap類似，但是彈性元素是從下往上堆疊的。3.9設(shè)置彈性容器中彈性元素的包裹方式【驗證示例3-10】設(shè)置彈性容器中彈性元素的包裹方式【模板代碼】<divclass="d-flexflex-wrap">..</div><divclass="d-flexflex-wrap-reverse">..</div><divclass="d-flexflex-nowrap">..</div>圖3-10【驗證示例3-10】的顯示效果3.10控制彈性元素在垂直方向上的對齊方式.align-content-start（默認）：將彈性元素垂直對齊到容器的頂部。.align-content-end：將彈性元素垂直對齊到容器的底部。.align-content-center：將彈性元素垂直居中對齊。.align-content-between：將第一個彈性元素對齊到容器的頂部，將最后一個彈性元素對齊到容器的底部，并將剩余的彈性元素均勻分布在中間。.align-content-around：將彈性元素均勻分布在容器內(nèi)，上下兩端留有相等的空白。.align-content-stretch：將彈性元素拉伸以填充整個容器的高度。請注意，這些類只對具有多行彈性元素的容器生效，對于單行彈性元素沒有影響，即在只有一行彈性元素的容器中是無效的?？梢愿鶕?jù)需要選擇合適的類來對齊彈性元素的垂直位置。3.10控制彈性元素在垂直方向上的對齊方式【驗證示例3-11】使用.align-content-*類控制彈性元素在垂直方向上的對齊方式【模板代碼】<divclass="d-flexflex-wrapalign-content-start">…</div><divclass="d-flexflex-wrapalign-content-end">…</div><divclass="d-flexflex-wrapalign-content-center">…</div><divclass="d-flexflex-wrapalign-content-around">…</div><divclass="d-flexflex-wrapalign-content-stretch">…</div>3.11控制單行彈性元素的垂直對齊方式在Bootstrap5中，可以使用.align-items-*類來設(shè)置單行彈性元素的垂直對齊方式，*可取的值有：start、end、center、baseline和stretch（默認）。這些類用于設(shè)置彈性容器中單行彈性元素的垂直對齊方式，具體介紹如下。.align-items-start：將彈性元素垂直對齊到容器的頂部。.align-items-end：將彈性元素垂直對齊到容器的底部。.align-items-center：將彈性元素垂直居中對齊。.align-items-baseline：將彈性元素與基線對齊。.align-items-stretch（默認）：將彈性元素拉伸以填充整個容器的高度。3.11控制單行彈性元素的垂直對齊方式【驗證示例3-12】使用.align-items-*類控制單行彈性元素的垂直對齊方式【模板代碼】<divclass="d-flexalign-items-start">..</div><divclass="d-flexalign-items-end">..</div><divclass="d-flexalign-items-center">..</div><divclass="d-flexalign-items-around">..</div><divclass="d-flexalign-items-stretch">..</div>3.12設(shè)置單個彈性元素的垂直對齊方式在Bootstrap5中，可以使用.align-self-*類來設(shè)置指定彈性元素的垂直對齊方式，*可取的值有：start、end、center、baseline和stretch（默認）。這些類用于設(shè)置彈性容器中單個彈性元素的垂直對齊方式，具體介紹如下。.align-self-start：將彈性元素垂直對齊到容器的頂部。.align-self-end：將彈性元素垂直對齊到容器的底部。.align-self-center：將彈性元素垂直居中對齊。.align-self-baseline：將彈性元素與基線對齊。.align-self-stretch（默認）：將彈性元素拉伸以填充整個容器的高度。3.12設(shè)置單個彈性元素的垂直對齊方式功能類型類名稱說明彈性容器.d-*-flex根據(jù)不同的屏幕尺寸創(chuàng)建彈性容器.d-*-inline-flex根據(jù)不同的屏幕尺寸創(chuàng)建行內(nèi)彈性容器顯示方向設(shè)置.flex-*-row根據(jù)不同的屏幕尺寸在水平方向顯示彈性元素.flex-*-row-reverse根據(jù)不同的屏幕尺寸在水平方向顯示彈性元素，且右對齊.flex-*-column根據(jù)不同的屏幕尺寸在垂直方向顯示彈性元素.flex-*-column-reverse根據(jù)不同的屏幕尺寸在垂直方向顯示彈性元素，且方向相反對齊方式設(shè)置.justify-content-*-start根據(jù)不同屏幕尺寸在開始位置顯示彈性元素（左對齊）.justify-content-*-end根據(jù)不同屏幕尺寸在尾部顯示彈性元素（右對齊）表3-1

各種flex類及其功能說明3.12設(shè)置單個彈性元素的垂直對齊方式功能類型類名稱說明對齊方式設(shè)置.justify-content-*-center根據(jù)不同屏幕尺寸在彈性容器中居中顯示彈性元素.justify-content-*-between根據(jù)不同屏幕尺寸使用between屬性顯示彈性元素.justify-content-*-around根據(jù)不同屏幕尺寸使用around屬性顯示彈性元素等寬設(shè)置.flex-*-fill根據(jù)不同的屏幕尺寸強制各元素等寬擴展設(shè)置.flex-*-grow-0不設(shè)置擴展.flex-*-grow-1根據(jù)不同的屏幕尺寸設(shè)