关于display:flex用法

今天看到别人一个wap页面用到了display:flex属性，平时也没怎么见到过，于是就百度学习了一下，发现这个属性的确很好用，该组合属性可以让父级内部的的空间按照设定比例分配给子级元素。先来说说他的用法。

css:

.box{width:600px;display: flex;flex-flow:column;//此属性设置将内部空间是分配水平上的空间还是竖直上空间}

.div1{flex:1;}

.div2{flex:3;}

.div3{width:200px;}

html：

<div class="box">
<div class="div1">左边</div>
<div class="div2">中间部分</div>
<div class="div3">右边</div>
</div>

这个属性得到的结果就是，div1的宽度：将box可用空间（600-200）按照1：3分成4等分，div1占1分，div2占三分得到以下结果

这样这3个div就神奇的划分成1：3：300px的宽度了，连float都不需要，而且这个比例是自适应的，是不是很神奇？，如果让我用别的方法来完成这种空间分配的需求，恐怕我只能用js来实现了，并且加上自适应还比较麻烦，个人感觉比bootstrap的栅格还好用哈哈，如果需要上下分匹配空间，设置flex-flow：row就行了，前提是box设置了高度。目前这个还是有兼容问题，不过移动端可以放心使用

详细解释http://www.360doc.com/content/14/0811/01/2633_400926000.shtml