## 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