flex-pack：设置子元素之间如何分配多余空间，值：start、end、center、justify。
flex-direction：设置子元素的排列方式， row、row-reverse、column、column-reverse。
flex-wrap：设置子元素的是否自动换行和排列方向，值：nowrap、wrap和wrap-reverse。
-ms-flex：设置子元素弹性，参数，分别是正弹性、负弹性和默认大小。
其实布局还有好多新玩法，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做 《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式
想要实现这个效果需要一定限制：1、瀑布流，竖向自动排列，可以实现这样的效果。先分为4栏横向排列，在每栏里建立元素，这样就能够竖向自动排列
2、绝对定位，将每个元素的位置设置好，定死
3、li的形式按照你的代码写，完全自适应有难度，因为浏览器布局的原理就是先横向对齐，先形成一行，才铺满元素，所以每个元素在发生变化、或者以后发生变化，定位依然会出问题。
建议用1方法，可能会好一些，但代码的循环输出可能会出问题，这个就需要一些js脚本插件来配合了，可以百度一下 瀑布流 插件。
如果这个页面以后无论如何都保持原样，那么可以用2 方法，做起来轻松容易准确。
