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)
css3引入了一種新的布局模式,叫做flexbox布局,即伸縮布局和 flexible box 模型,很多地方又稱為彈性盒模型,我們下面都叫彈性盒模型,它可以用來提供乙個更加有效的方式制定 調整和分布乙個容器裡的專案布局 css中的布局方式總結 塊布局 行內布局 布局 定位布局 flexbox布局 ...
移動端開發頁面布局 3
1 響應式布局定義 頁面布局會隨著螢幕大小變化而發生不同的響應,稱為響應式布局。1 不需要單獨寫移動端頁面 2 根據不同裝置發生變化 2 原理 通過 查詢針對不同寬度的裝置進行布局和樣式的設定,從而適配不同裝置 分四個檔位 手機 768px 平板 768px 992px 桌面顯示器 992px 12...
移動端布局
預設以寬度為640px的設計稿為基準頁面,然後通過js獲取當前顯示裝置的尺寸,對應的調整 html 標籤的font size大小,從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...