flex布局解决了几个问题
1 margin重叠问题
例如
.item{border: 1px solid green;margin: 30px;}
<div style="border: 1px solid red;"> <div class="item"> margin重叠为 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> </div>
正常来说：class为item 的第一个div和第二个div上下之间应该有60px的具体，但是只有30px
<div style="border: 1px solid red;display: flex;"> <div class="item"> margin重叠消除了。 1-2之间时60 2-3之间是60 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> </div>
2 使用flex,清除了float
<div style="border: 1px solid red;display: flex;"> <div class="item" style="float: left;"> 清除了float </div> <div class="item" style="float: right;"> 2并没在右边显示 </div> <div class="item" style="float: right;"> 3 </div> </div>
原文：http://www.cnblogs.com/tenyear/p/flex2.html