移動端布局（3）

css3引入了一種新的布局模式，叫做flexbox布局，即伸縮布局和（flexible box）模型，很多地方又稱為彈性盒模型，我們下面都叫彈性盒模型，它可以用來提供乙個更加有效的方式制定、調整和分布乙個容器裡的專案布局

css中的布局方式總結：

塊布局行內布局 **布局定位布局 flexbox布局（css3新引入）

主軸和側軸你可以簡單的理解為水平和垂直方向上的兩根軸，類似x軸和y軸，預設情況下主軸是水平方向的，但是可以設定，將主軸設定成垂直方向，主軸外的另一軸就是側軸

伸縮容器就是通過display屬性設定為flex或者inline-flex的容器（盒子），伸縮專案就是這個伸縮容器下面的子元素

flexbox布局語法規範主要分為三種：

舊版本：2023年版本，使用display:box或者display:inline-box 混合版本： 2023年版本，使用display:flexbox 或者display:inlne-flexbox 最新版本：使用display:flex 或者 display:inlne-flex

檢視flexbox相容性支援情況

12

34

display: flex; /* 設定主軸為水平 */ /* flex-direction: row; */ /* 設定主軸方向為垂直 */ flex-direction: column;

/* 使用flex-direction來設定主軸和專案的排序方向 flex-direction：有四個值，分別是row（水平正方向）、row-revers（水平反方向）、column（垂直正方向）、column-revers（垂直反方向） */flex-direction: column-reverse;

總結：伸縮專案總是沿著主軸正方向排列

先說富裕空間概念，富裕空間字面上理解就是多餘的空間，也就是子元素排列後剩下的空間，不管是主軸還是側軸上都有富裕空間這個概念

新版本

/* 主軸 justify-content： 5個選項值 flex-start：專案位於容器的開頭，富裕空間在後 flex-end：富專案位於容器的結尾，富裕空間在前 center：專案位於容器的中心，富裕空間在兩邊 space-between：富裕空間在專案之間 space-around：專案位於各行之前、之間、之後都留有空白的容器內。富裕空間在專案前後都有 */display: flex; justify-content: flex-end;

/* 側軸 align-items： 5個選項值 flex-start: 元素位於容器的開頭（起點對齊（ flex-end: 元素位於容器的結尾（終點對齊） center:元素位於容器的中心。（居中對齊） baseline: 元素位於容器的基線上（基線對齊） stretch: 預設值。元素被拉伸以適應容器 */display: flex; justify-content: flex-end; align-items: baseline;

/* no-wrap: 單行顯示 wrap：多行顯示 wrap-reverse：多行顯示，排列順序和wrap相反 */flex-wrap: wrap;

display: -webkit-box; /* 設定主軸為水平 */ /* -webkit-box-orient: horizontal; */ /* 設定主軸為垂直 */ -webkit-box-orient: vertical;

/*預設正方向： normal，反方向為reverse*/ -webkit-box-direction: reverse;

/* 主軸：-webkit-box-pack start：起點對齊 end：終點對齊 center：居中對齊 justify：兩邊對齊

*/

/* 側軸：-webkit-box-align start：起點對齊 end：終點對齊 center：居中對齊 justify：兩邊對齊

*/

移動端布局（3）

移動端布局（3）

移動端開發頁面布局 3

移動端布局

相關推薦