流式布局，就是百分比布局，也稱非固定畫素布局。
通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。
流式布局方式是移動web開發使用的比較常見的布局方式。
設定子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況（多行），在單行下是沒有效果的。
flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。
數值越小，排列越靠前，預設為0。
rem (root em)是乙個相對單位，類似於em，em是父元素字型大小。
不同的是rem的基準是相對於html元素的字型大小。
比如，根元素（html）設定font-size=12px; 非根元素設定width:2rem; 則換成px表示就是24px。
rem的優勢：父元素文字大小可能不一致， 但是整個頁面只有乙個html，可以很好來控制整個頁面的元素大小。
**查詢（media query）是css3新語法。
關鍵字將**型別或多個**特性連線到一起做為**查詢的條件。
每種**型別都具體各自不同的特性，根據不同**型別的**特性設定不同的展示風格。
注意他們要加小括號包含
注意： 為了防止混亂，**查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣**更簡潔
維護css弊端
css 是一門非程式式語言，沒有變數、函式、scope（作用域）等概念。
less 介紹
less（leanerstyle sheets 的縮寫）是一門 css擴充套件語言，也成為css預處理器。
做為 css的一種形式的擴充套件，它並沒有減少css的功能，而是在現有的css語法上，為css加入程式式語言的特性。
它在css 的語法基礎之上，引入了變數，mixin（混入），運算以及函式等功能，大大簡化了 css 的編寫，並且降低了 css的維護成本，就像它的名稱所說的那樣，less可以讓我們用更少的**做更多的事情。
less是一門 css 預處理語言，它擴充套件了css的動態特性。
less安裝
①安裝nodejs，可選擇版本(8.0)
②檢查是否安裝成功，使用cmd命令（win10是window+r 開啟執行輸入cmd） —輸入「node –v」檢視版本即可
④檢查是否安裝成功，使用cmd命令「 lessc -v 」檢視版本即可
less 使用之變數
變數是指沒有固定的值，可以改變的。因為我們css中的一些顏色和數值等經常使用。
@變數名:值;只要儲存一下less檔案，會自動生成css檔案。
less 巢狀
// 將css改為less
#header .logo
#header
}
a:hover
a}
任何數字、顏色或者變數都可以參與運算。就是less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
/*less 裡面寫*/
@witdh
: 10px + 5;
div/*生成的css*/
div/*less 甚至還可以這樣 */
width:(
@width + 5) * 2;
2.使用**查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
技術方案：
1.less+rem+**查詢
2.lflexible.js+rem
適配方案1
①假設設計稿是750px
②假設我們把整個螢幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）
③每乙份作為html字型大小，這裡就是50px
④那麼在320px裝置的時候，字型大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字型大小會發現他們比例還是相同的
⑥比如我們以750為標準設計稿
⑦乙個100100畫素的頁面元素在 750螢幕下， 就是 100/ 50 轉換為rem 是 2rem2rem 比例是1比1
⑧320螢幕下， html字型大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經能實現不同螢幕下 頁面元素盒子等比例縮放的效果
總結：①最後的公式：頁面元素的rem值 = 頁面元素值（px） / （螢幕寬度 / 劃分的份數）
②螢幕寬度/劃分的份數就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字型大小
首頁我們假設將螢幕劃分為若干等份,通過**查詢，在不同裝置的不同螢幕尺寸下將html的font-size設定為（螢幕寬度 / 劃分的份數）,這個值就是rem單位,然後其他的頁面元素以rem為單位去設定大小,這樣就可以實現在不同螢幕下頁面元素等比例縮放.
適配方案2
手機**團隊出的簡潔高效 移動端適配庫
我們再也不需要在寫不同螢幕的**查詢，因為裡面js做了處理
它的原理是把當前裝置劃分為10等份，但是不同裝置下，比例還是一致的。
我們要做的，就是確定好我們當前裝置的html 文字大小就可以了
比如當前設計稿是 750px， 那麼我們只需要把 html 文字大小設定為 75px(750px / 10) 就可以
裡面頁面元素rem值： 頁面元素的px 值 / 75
剩餘的，讓flexible.js來去算
總結：因為flexible是預設將螢幕分為10等分
但是當螢幕大於750的時候希望不要再去重置html字型了
所以要自己通過**查詢設定一下
並且要把權重提到最高
vscode px 轉換rem 外掛程式 cssrem
因為cssrem中css自動轉化為rem是參照預設外掛程式的16轉換的所以需要自己配置
就是使用**查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的。
裝置的劃分情況：
響應式需要乙個父級做為布局容器，來配合子級元素來實現變化效果。
原理就是在不同螢幕下，通過**查詢來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同螢幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
但是我們也可以根據實際情況自己定義劃分
移動開發布局 flex
flex flow 3.flex布局子項常見屬性 當我們為父盒子設為flex布局以後，子元素的float clear和vertical align都會失效 伸縮布局 彈性布局 伸縮盒布局 彈性盒布局 flex布局 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex dir...
移動web開發 rem布局
rem單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px。根html 為 12px html 此時 ...
移動web開發 flex布局
container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。item...