微信浏览器 flex兼容性问题 flex-wrap: wrap;不换行

Question

在开发一个页面的时候 用的flex布局 没想到在测试上面 大部分的机子没问题 但是小部分出现了兼容性的问题 应该是版本比较老的原因
请问有什么方法解决一下？
以开始用的flex-wrap: wrap;

要的是这样显示
但是有的手机却显示成一行

然后我把flex-wrap: wrap;都加上前缀

-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
却变成了

一直郁闷着 求如何解决

Answer 1

不知道用的是什么编辑器，装个Autoprefixer插件直接跑遍兼容吧。

Answer 2

关于 flex 兼容，低版本坑特别多。还是建议乖乖用 float 吧。

首先是低版本对 flex 的大部分属性都支持，但是 flex-wrap ，是一点都不支持的，建议用 display: inline-block 代替。

然后如果要用 flex 布局，切记子元素一定要是块级元素，就是设置 display: block; 否则的话低版本是没有 flex 效果的。高版本是不用设置的，行内元素也支持 flex 布局。

Answer 3

为了兼容性,建议不要使用flex简写
flex-grow
flex-shrink
flex-basis
分别加前缀
在一些旧版本浏览器上需要使用 box-flex

Answer 4

flex-wrap换行，控制flex是单行或者多行。同时横轴的方式决定了新行堆叠的方向

Answer 5

可以直接js判断换行啊，本来flex的兼容性就不是很好的