移動端實際場景中經常會遇到將header置頂，然後下面list需要滾動的情況，通常的做法會是將header使用fixed的方式固定到頂部，然後list主體相對於header的位置設定margintop或者position的定位，這樣的話做起來感覺有點彆扭，也不貼合移動端的布局，而且position:fixed定位會在ios8以下發生抖動現象，所以使用flex布局最佳。
如果要禁用ios的橡皮筋效果，可以使用下面橡皮筋禁止方法，也可以借用[inobounce](庫處理。
.root的樣式設定也可以替換為html和body設定height: 100%的方式處理，少寫乙個div標籤，但是個人覺得這樣的處理直接動html根標籤不太合適，而且可控性不好，所以沒有寫出來。
header01
2345
6789
0123
4567
8901
2345
6789
footer
自用 flex布局相容寫法
當我在調垂直居中怎麼都居中不了的時候，我就會想用 flex 布局。當我全部都用了 flex 布局而沒有帶上相容字首，在一些裝置上，樣式簡直不忍直視 記錄一下 flex 的相容寫法，方便以後查閱。就寫幾個常用的，其他的應該就在前面加字首即可。display webkit box display moz...
頁面布局之flex布局
flex布局 flex布局也叫作彈性盒子布局，可以簡便 完整 響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制，常用的屬性有 space between space around center le...
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...