css 多列布局不同浏览器兼容性引发的思考

css3 中引入了多列布局的模式。

在 mdn 上有一篇文章，详细的介绍了相关信息，有兴趣的童鞋可以阅读下这篇文章：Multiple-column layout - Learn web development | MDN。

但是笔者想针对每个应用了 column 布局的块级区域应用 flex 布局的时候，会出现火狐浏览器布局和 chrome 浏览器不相同的情况。

demo 地址：multiple-column

在 chrome 浏览器打开，状态是这样：

但是在火狐浏览器上，打开，状态是这样的：

很明显能看到，同样的代码，两个浏览器布局不一致。

后来经过测试，发现如果去掉 flex 布局，就一样了。

但是如果又想要使用一些 css3 布局的效果，怎么处理呢