0.基本概念
採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。
1.傳統固定布局：
實現方法：用width和height指定寬高px值、以及float浮動
缺點：有空白、且無法隨瀏覽器視窗變化而調整大小和布局
2.百分比布局：
實現方法：用width和height指定寬高%值，以及float浮動
缺點：有空白
3.flex伸縮布局：
實現方法：
3.1.給容器元素設定display:flex屬性
3.2.通過給【專案】(容器內子元素)的flex屬性，來設定專案比例。例如專案a的flex:1,專案b的flex:2，表示a與b的寬度為1:2
3.3.flex-direction排列方向（主軸）:
row: 預設.把專案排列的主軸設定為水平方向，從左到右
row-reverse: 水平方向，從右到左
column: 垂直方向，從上到下
column-reverse: 垂直方向，從下到上
3.4.flex-wrap單行/多行:
nowrap: 預設.不換行
wrap: 換行
wrap-reverse: 倒序換行
3.5.justify-content主軸對齊方式:
flex-start: 向主軸起始位置靠攏對齊
flex-end: 向主軸結束位置靠攏對齊
center: 主軸方向居中
space-between: 兩頭對齊（中間空白）
space-around: 平均分布（兩頭、中間空白）
3.6.align-items側軸對齊方式:
flex-start: 向主軸起始位置靠攏對齊
flex-end: 向主軸結束位置靠攏對齊
center: 主軸方向居中兼
baseline: 兩頭對齊（中間空白）
stretch: 平均分布（兩頭、中間空白）
4.響應式布局方案：
4.1.**型別：all、screen、print、tv、projection等
4.2.引入**型別兩種方式：
@media print
}
4.3.**特性
max-width: 最大寬度
min-width:
device-width: 裝置螢幕輸出寬度
device-height: 裝置螢幕輸出高度
width: 渲染介面寬度
height: 渲染介面高度
orientation: portrait橫屏/landspace豎屏
resolution: 解析度
color: 每種色彩位元組數
color-index: 色彩表中的色彩數
4.4.**查詢語法：
@media [and/only/not] **型別 and/only/not (**特性)
【舉例】：
1.樣式用於電腦顯示屏和螢幕寬度小於1200px的裝置
@media screen and (max-width:1200px)
2.用於瀏覽器相容。用於支援**型別(screen)卻不識別**特性(max-width)的老瀏覽器
3.樣式用於除印表機和螢幕小於1200px之外的所有裝置
@media not print and (max-width:120px)
布局不變，
內容擠壓-拉伸
換行-平鋪
增減內容
布局改變
模組位置變換
模組展示方式改變
模組數量改變
6.響應式布局兩個前提：
6.1.能自動調整布局（彈性布局）
6.2.能自動感知裝置大小
響應式布局的開發基礎
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
移動端響應式布局基礎
搭建乙個h5頁面，我們需要在head中新增乙個meta標籤 快捷鍵 meta vp tab鍵 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這...