css 多栏自适应布局_html/css_WEB-ITnose

在页面重构中，我们经常会需要实现多栏布局，例如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;}

 

 

 其他更神奇的用法就慢慢学习吧，有不正确的地方请指出