css 多欄自適應佈局

在頁面重構中，咱們常常會須要實現多欄佈局，例如n欄固定寬度 + m欄自適應寬度的組合，絕對佈局+padding+百分比寬度是容易想到的比較暴力的解決方法，可是做爲將來的"工程師"，咱們應該需求一些優雅點的方法。先說說兩欄佈局，上例子：

<div class='container' >
    <div class='div1' >1</div>
    <div class='div2' >2</div>
</div>

如圖，假如在一個容器中，有兩個子元素，咱們想元素1寬度爲200px，元素2寬度鋪滿剩下的容器寬度，比較暴力的方法就是前面說的絕對佈局+padding+百分比寬度，關鍵css:

//暴力方法 絕對佈局 + padding + 百分比
.container{padding-left: 200px;position: relative;}
.div1{height: 200px;position: absolute;left: 0;}
.div2{width: 100%;}

我是例子，戳我

固然，此處.div2是塊級元素，不設寬度也能夠。

 

---

 

第二種方法，就是用到dom元素特定條件下的神祕的 「BFC」 特清除浮動性，不瞭解的搜索一下，直接上關鍵css

//優雅方法 float + BFC
.div1{width:200px;float: left;}
.div2{overflow: hidden;}

 我是例子，戳我

怎麼樣，是否是優雅了不少。由於在已知.div1具體寬度的條件下，也能夠不觸發.div2的BFC特性，設置其 margin-left:200px 也能夠達到一樣的頁面效果，可是假如.div1改變了呢，這就須要手動改.div2的margin-left了，這就不夠靈活了，感興趣的能夠本身試一下。

 

---

 

第三種方法，用到css3的flex佈局，也就是傳說中新一代的佈局--流動式佈局，原理不說，上關鍵css

//前衛方法 flex
.container{display: flex;}
.div1{width:200px;}
.div2{flex:1;}

 

我是例子，戳我

是否是也很簡單，想了解更多原理性的東西仍是建議觀摩一下大神的博客吧，這裏只是總結知識的地方 0.0  ，並且flex佈局在某些瀏覽器下可能須要前綴，能夠到 http://pleeease.io/play/ 自動添加瀏覽器前綴（不錯的書籤）

 

---

 

第四種方法，曾經在 「遠古時期」 的前端圈子風靡一時table佈局，上css

//遠古方法 table + table-cell
.container{display:table;width: 100%;}
.div1{width:200px;display: table-cell;}
.div2{display:table-cell;}

 

我是例子，戳我

其實看上去也蠻簡單的嘛，哈哈。。不過多是名字不夠高大上或者其餘什麼緣由被其餘佈局方式取代的吧

 

---

 

---

 前面所說的例子都是針對兩欄佈局的，若是是兩欄以上的需求，float + BFC 的方法就不太好使了，由於只能有一欄能夠經過清除浮動自適應鋪滿剩餘寬度，我的就建議用 flex 佈局了，原理是同樣的，固定寬度的就設置寬度，自適應的就根據比例設置flex數值，table佈局的話也不夠 flex 靈活，固定寬度的 table-cell 就設置寬度，不設置寬度的就會均分剩餘寬度了。

總結以上，flex是最靈活的，其實flex的牛13之處還有不少，例如它能夠實現

元素垂直、水平居中

.container{ display:flex;
            align-items: center;//子元素垂直居中
            justify-content: center;//子元素水平居中
　　　　　　}                

 

固然，align-items 和 justify-content 在舊瀏覽器也有不一樣寫法的，可是現代瀏覽器大多數都支持這種寫法了，保守起見，使用的時候仍是去 http://pleeease.io/play/ 、http://caniuse.com/ 查一查

 

垂直多欄自適應佈局等

.container{display: flex;flex-direction: column;height: 500px;}
.div1{width: 100%; flex:1;}
.div2{width: 100%;height: 200px;}
.div3{width: 100%;flex:1;}

 

 

 其餘更神奇的用法就慢慢學習吧，有不正確的地方請指出