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;}

 

 

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