彈性布局目錄CONTENTS02彈性布局容器樣式實戰案例：燒烤餐廳網頁0401彈性布局概述彈性布局項目樣式03思考與練習0501彈性布局概述彈性布局是一種基于彈性盒子模型的頁面布局技術，能夠根據設備屏幕尺寸和分辨率自動調整布局，替代傳統CSS布局方式。01彈性布局通過.d-flex和.d-inline-flex類創建彈性容器，容器內的子元素自動成為彈性項目。02彈性布局定義01靈活性高：自動調整布局，適應不同設備屏幕。02響應式設計：支持多種屏幕尺寸，無需固定像素值。開發效率高：減少自定義CSS編寫，快速實現復雜布局。彈性布局優勢02彈性布局容器樣式水平對齊.justify-content-{value}類用于設置項目在主軸上的對齊方式，value可取start、end、center、between、around、evenly。示例代碼：html響應式支持：.justify-content-{sm|md|lg|xl|xxl}-{value}。01垂直對齊.align-items-{value}類用于設置項目在交叉軸上的對齊方式，value可取start、end、center、baseline、stretch。示例代碼：響應式支持：.align-items-{sm|md|lg|xl|xxl}-{value}。02項目對齊工具類.flex-row類使項目水平排列，.flex-row-reverse類使項目從右到左排列。示例代碼：響應式支持：.flex-{sm|md|lg|xl|xxl}-row、.flex-{sm|md|lg|xl|xxl}-row-reverse。.flex-column類使項目垂直排列，.flex-column-reverse類使項目從下到上排列。示例代碼：響應式支持：.flex-{sm|md|lg|xl|xxl}-column、.flex-{sm|md|lg|xl|xxl}-column-reverse。水平排列垂直排列排列方向工具類.flex-wrap類使項目超出容器寬度時自動換行，.flex-nowrap類使項目不換行，.flex-wrap-reverse類使項目反向換行。項目換行工具類03彈性布局項目樣式01.order-{value}類用于設置項目的順序，value可取0到5，.order-first類將項目置于最前，.order-last類將項目置于最后。02示例代碼：03響應式支持：.order-{sm|md|lg|xl|xxl}-{value}。項目排序工具類.flex-grow-{0|1}類用于控制項目是否使用容器的剩余空間，1表示使用，0表示不使用。示例代碼：響應式支持：.flex-{sm|md|lg|xl|xxl}-grow-{0|1}。伸縮增長.flex-shrink-{0|1}類用于控制項目是否按比例收縮，1表示按比例收縮，0表示不收縮。示例代碼：響應式支持：.flex-{sm|md|lg|xl|xxl}-shrink-{0|1}。伸縮收縮0102項目伸縮工具類02響應式支持：.align-self-{sm|md|lg|xl|xxl}-{value}。01.align-self-{value}類用于設置項目自身在交叉軸上的對齊方式，value可取start、end、center、baseline、stretch。自身對齊工具類02響應式支持：.ms-{sm|md|lg|xl|xxl}-auto、.me-{sm|md|lg|xl|xxl}-auto、.mx-{sm|md|lg|xl|xxl}-auto。01.ms-auto、.me-auto、.mx-auto類用于實現項目的自動浮動，分別表示向左、向右和居中對齊。自動浮動工具類04實戰案例：燒烤餐廳網頁制作一個燒烤餐廳網頁，包含導航欄、輪播廣告區、主要內容區和頁腳信息，使用彈性布局實現響應式設計。案例概述使用Bootstrap的navbar組件創建響應式導航欄，包含Logo、品牌名稱、導航鏈接和搜索表單。示例代碼：0102網頁頭部導航欄使用Bootstrap的carousel組件實現輪播廣告區，循環播放燒烤圖片。01輪播廣告區包含歡迎信息、特色菜品列表、餐廳簡介和營業時間，使用彈性布局實現模塊化布局。網頁主要內容包含聯系方式、特色菜單和顧客評價，使用彈性布局實現信息的整齊排列。頁腳信息05思考與練習1彈性布局是一種基于彈性盒子模型的布局技術，可實現.d-flex、.d-inline-flex等工具類或displayflex、display:inline-flex等CSS屬性。2作用于彈性布局容器的工具類包括.justify-content-{value}、.align-items-{value}、.flex-wrap等。3用于項目伸縮的工具類包括.flex-grow-{0|1}、.flex-shrink-{0|1}，分別用于控制項目是否使用容器的剩余空間和是否按比例收縮。4在Bootstrap中，使用.flex-column類創建垂直方向的彈性布局。5使用.d-flexjustify-content-centeralign-items-center實現水平和垂直居中對齊。6調整彈性容器中項目排列順序的工具類包括.order-{value}、.ord