## flex布局  上图是一个常见的 **列平均间隔布局** 如果让你实现，你最先想到的是如何实现呢。 提起布局，大家用的最多的就是 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