小屏幕布局設(shè)計原則
核心思想：顯示在一個長條里
菜單：只保留菜單圖標(biāo)甜攀，點擊圖標(biāo)再顯示菜單
主內(nèi)容區(qū)：在頁頭下方
右邊欄：在主內(nèi)容區(qū)下方
布局問題
1.做到垂直方向居中很困難
2.相鄰元素扒怖，很難做到1個固定蜗字，另一個填充空間
瀏覽器兼容性
IE9以下不支持碱璃，IE10菩鲜、IE11支持的不好
Flexbox的對齊
方向：默認(rèn)是row淋样，橫向排列作岖，可以改成column唆垃，縱向排列
主軸：row方向是橫軸
交叉軸：row方向是縱軸
案例1-垂直居中
案例2-水平排列
案例3-垂直排列
通過flex-direction來制定排列方向，row是水平方向痘儡，column是豎直方向
案例4-不同的對齊方式
align-self5種可能屬性：flex-start flex-end center baseline stretch
案例5-伸縮性
flex-grow：定義項目的放大比例辕万，默認(rèn)為0，即如果存在剩余空間谤辜，也不放大蓄坏，如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）丑念。如果一個項目的flex-grow屬性為2涡戳，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍脯倚。
flex-shrink：定義了項目的縮小比例渔彰，默認(rèn)為1，即如果空間不足推正，該項目將縮小恍涂。如果一個項目的flex-shrink屬性為0，其他項目都為1植榕，則空間不足時再沧，前者不縮小。
flex-basis:屬性定義了在分配多余空間之前尊残，項目占據(jù)的主軸空間（main size）炒瘸。瀏覽器根據(jù)這個屬性淤堵，計算主軸是否有多余空間。它的默認(rèn)值為auto顷扩，即項目的本來大小拐邪。
響應(yīng)式Web設(shè)計 HTML5和CSS3實戰(zhàn) 第2版
下載地址：http://pan.baidu.com/s/1cByAT4密碼：c6ox
購買鏈接：https://item.jd.com/12116654.html
詳細(xì)閱讀
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
