張歆琳
關注2016.06.17 10:50*
字數 701
閱讀 1063
喜歡 15
首先弄出原始的html結構，左右側邊欄定寬220px
id="footer">footerdiv>現在將內容容器（#page）設成flex彈性盒模型：#page
中間main就是個普通的div，因此寬度好像沒有自適應，很簡單設#main即可。因為兩個側邊欄沒有設flex，因此剩餘的寬度將被main獨享
main的位置不對，調整位置非常簡單，設定#main即可。當然別忘了同步給right設#right。left不設預設為0。
你可能會疑惑，直接在dom按left->main->right順序排列不就行了，為何排列成main->left->right？確實調整dom順序也能達到同樣效果，但將main越置前，對seo搜尋越友好。這其實並無標準答案，如果你覺得left的內容同樣重要，那left->main->right的dom順序也是沒問題的。
現在只剩最後一步，將footer置底並拉公升page部分。先將html和body的height設成100%，為全屏做準備。由於body裡包含了header，page，footer，因此為body設定flex彈性盒模型，同時設定flex-direction: column;讓3個子元素垂直排列body
最後將page拉伸就簡單了，思路和上面main一樣，只要給page設定flex:auto;，因為header和footer沒有設flex，因此剩餘的高度將被page獨享。
總結一下自適應三列等高布局的思路，body應用垂直的flex模型，讓頁頭，頁面，頁尾垂直排列，其中只有頁面部分有flex:auto;將自適應高度。頁面部分應用flex模型，內容，左側欄，右側欄將水平排列，其中只有內容部分有flex:auto;將自適應寬度。如果為了seo優化，在dom中將內容部分放在左右側邊欄上面的話，通過order調整順序。
更多布局的例子，可以看看solved by flexbox
用flex彈性盒子可以輕鬆實現等比例布局：
div>也可以實現部分固定比例，剩餘部分自適應布局：
**頁面上都有，極其簡單，可以自行參考。
flex用於布局真的非常方便，原先用inline-block，float寫的一堆既醜且難維護的**，用flex可以很優雅地實現，什麼垂直居中都是浮雲。唯一需要的只是時間，等那些舊式瀏覽器都死透了，彈性盒子的春天就來了
css flex布局基礎
1 flex 讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 塊級元素 藍色 紅色藍色 紅色藍色 紅色藍色 紅色 main main div 效果 2 flex basis 專案的長度。合法值 auto inherit 或乙個後跟 px em 或任何其他長度單位的數字 main1 ...
CSS Flex布局整理
注意相容問題 示例的dom結構 div class box div class item 1 div div class item 2 div div class item 3 div div 基礎樣式設計 box item1 flex direction 用於指定flex主軸的方向，繼而決定 fl...
css flex布局知識梳理
布局的傳統解決方案，基於盒裝模型，依賴display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。flex注意，設為 flex 布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的稱其為 容器 ...