移動端布局(3)

2022-08-19 18:51:17 字數 2536 閱讀 7013

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