在網頁製作中，柵格系統就是用固定的格仔進行網頁布局，是一種清晰，工整的設計風格
display用於指定彈性盒的容器，其值可以為flex；如果為行內元素，值為inline-flex.
flex-flow是屬性flex-direction和flex-wrap的簡寫，用於排列彈性子元素。
-flex-direction取值
描述row
彈性盒子元素按軸方向順序排列，預設值
row-reverse
彈性盒子元素按軸方向逆序排列
column
彈性盒子元素按縱軸方向順序排列
column-reverse
彈性盒子元素按縱軸方向逆序排列
取值描述
nowrap
flex容器為單行，該情況下flex子項可能會溢位容器
wrap
彈性盒子元素按軸方向逆序排列
wrap-reverse
彈性盒子元素按縱軸方向逆序排列
justify-content屬性能夠設定子元素如何在當前軸方向的排列，取值如小表所示：
取值描述
flex-start
彈性盒子元素將向行起始位置對齊
flex-end
彈性盒子元素將向行結束位置對齊
center
彈性盒子元素按將向行中間位置對齊
space-between
彈性盒子元素會平均地分布在行裡
space-around
彈性盒子元素會平均地分布在行裡
align-items屬性用於設定子元素在垂直於軸的方向上的排列，其取值如下表所示：
取值描述
flex-start
彈性盒子元素向垂直於軸的方向上的起始位置對齊
flex-end
彈性盒子元素向垂直於軸的方向上的結束位置對齊
center
彈性盒子元素向垂直於軸的方向上的中間位置對齊
baseline
如彈性盒子元素的行內軸與側軸為同一條，則該值與『flex-star』等效。其他情況下，該值將參與基線對齊
stretch
如果指定側軸大學的屬性值為「auto」，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照「min/max-width/height」屬性的限制
order屬性用於設定子元素出現的順序,取值為1,2,3…
flex屬性是flex-grow（擴充套件比率），flex-shrink（收縮比率）和flex-basis（寬度，畫素值）的縮寫，能夠設定子元素的伸縮性。
align-self屬性能夠覆蓋容器中的align-items屬性，用於設定單獨的子元素如何沿著縱軸排列
其取值有auto|flex-star|flex-end|center|baseline|stretch,每個值的意義與align-items屬性的取值類似。
html5 響應式布局
一 什麼是響應式布局?響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移...
html5 響應式布局示例
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個 概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕 移動裝置的普及，用 ...
px單位html5響應式方案
移動端h5響應式方案最近這幾年用得最多的最多的就是rem方案了。這個需要計算根元素的font size來實現響應式。但這種方案也有乙個缺點，那就是font size不為整數的時候一些字型使用rem單位會導致字型顯示的有問題比如字型會產生鋸齒，對視覺還原要求比較高的專案來說這還是令前端開發挺頭疼的一件...