Flex box彈性佈局 及 響應式前端設計的優化

Flex box彈性佈局

    Flex box是CSS3新添加的一種模型屬性，它的出現有力的打破了咱們經常使用的浮動佈局、實現垂直等高、水平均分、按比例劃分，能夠實現許多咱們以前作不到的自適應佈局。若是你但願網站能以webapp的外觀呈如今手機用戶面前，那麼，Flex box就是個不錯的方式。Flex box和APP的結構很相似，頭部底部所有固定，而中間部分的高度實現自適應。

應用於父元素上：

一、display:flex/inline-flex

二、flex-wrap:nowrap/wrap/column/column-reverse  是否換行

三、flex-direction:row/row-reverse/column/column-reverse  橫着仍是豎着顯示

四、flex-flow:flex-direction|flex-wrap 複合元素

五、justify-comtent:flex-start/flex-end/center/space-between/space-around 水平方向對齊方式

六、align-items:flex-start/flex-end/center/baseline/stretch 縱軸對齊方式

七、align-content:flex-start/flex-end/center/space-between/space-around/stretch   在換行狀況下，縱軸對齊方式

應用於子元素上

一、order：<integer>用數據值來定義排列順序，數值越小的排在前面（能夠爲負值）

二、flex-grow：<number>(default 0)設置uo檢索彈性盒的擴展比率（不容許負值）

三、flex-shrink：<number>(default 1)收縮比例（超出最大範圍）

四、flex-basis:<length>|auto(default auto)(不容許負值)

　　　　　　　　<percentage>用百分比來定義寬度（不容許負值）

五、flex：none|flex-grow||flex-shrink||flex-basis 複合屬性

六、align-self:auto|flex-start|flex-end|center|baseline|stretch  檢索自身在側縱軸方向上的對齊方式

注意注意：在設置彈性盒子的時候css不起做用的屬性：

一、float、clear、vertial-align

優化  響應式前端設計的優化。主要針對用戶體驗的改進。

  (1)減輕Javascript庫負載

       對於移動端來講，jQuery表現的太過厚重，而如今針對移動端的狀態來講，有jQuery Mobile、YUI、XUI等可供選擇的框架。

  （2）減小HTTP請求次數

  移動端相比較PC端有一個特殊的限制須要考慮到，就是用戶的網絡流量是有限的。這時候針對這些頁面內部的部分操做，能夠使用Ajax異步請求來完成，針對短時間內不會變化的一些數據，能夠使用服務器端緩存、前端緩存等機制來保存這些數據，這樣能夠減小用戶必定的數據請求量。

  （3）Javascript和CSS須要儘可能壓縮

  把頁面中使用的Javascript和CSS進行壓縮以後會有效地減小頁面大小。

  （4）用CDN管理頁面資源

  CDN的即內容分發網絡，意在儘量避開互聯網上有可能影響數據傳輸速度和穩定性的環節，使內容傳輸的更穩定。

  （5）列表圖片實現「懶」加載

  移動終端設備由於屏幕大小有限，沒有必要將全屏中的圖片一次性加載完成，網頁加載的同時，咱們能夠選擇逐個加載，當用戶進行滑動頁面的時候，再繼續加載圖片。

 （6）圖片顯示的優化處理

  根據用戶設備的分辨率來加載不一樣分辨率下的不一樣圖片，這樣既能給不一樣終端的用戶一個很好的視覺體驗，又不會白白浪費用戶的網絡數據流量。