🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## flex布局 ![](http://cdn.aipin100.cn/18-11-20/42323395.jpg) 上图是一个常见的 **列平均间隔布局** 如果让你实现,你最先想到的是如何实现呢。 提起布局,大家用的最多的就是 div+css 布局,css布局是一种 [文档流和盒子模型](http://www.w3school.com.cn/css/css_positioning_floating.asp) ,通常我们使用百分比或者居中来进行布局,但很多时候处理这种情况会非常的麻烦。 如上面那个商品列表布局,你首先想到的,最简单的一个实现就是用浮动流式布局,它需要计算元素每个宽度和元素之间的间隔,还要对第一个元素和最后一个元素的边距做特殊的处理,只有这样才能实现一个列表的平均间隔布局,相信很多人都有过这种布局计算的糟糕经历。 如果列或者容器宽度变化,或者列数变化,则又要重新计算,这很麻烦,也很傻很笨,但是很无赖,一直以来也没有好的解决办法。 你在想为什么要自己傻傻的计算呢,直接告诉浏览器 [平均间隔] 不行吗,很简单啊,是的,很简单,可是它听不懂。 而现在 flex 来了,flex 是一种全新的布局方式,可以轻松的解决上面的问题,我们终于不用再计算了。 [Flex 布局教程:语法篇 - 阮一峰的网络日志](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) ***** last update:2018-11-20 00:19:20