鍍金池/ 問(wèn)答/HTML5  HTML/ 微信瀏覽器 flex兼容性問(wèn)題 flex-wrap: wrap;不換行

微信瀏覽器 flex兼容性問(wèn)題 flex-wrap: wrap;不換行

在開(kāi)發(fā)一個(gè)頁(yè)面的時(shí)候 用的flex布局 沒(méi)想到在測(cè)試上面 大部分的機(jī)子沒(méi)問(wèn)題 但是小部分出現(xiàn)了兼容性的問(wèn)題 應(yīng)該是版本比較老的原因
請(qǐng)問(wèn)有什么方法解決一下？
以開(kāi)始用的flex-wrap: wrap;

clipboard.png
要的是這樣顯示
但是有的手機(jī)卻顯示成一行

clipboard.png
然后我把flex-wrap: wrap;都加上前綴

-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
卻變成了

clipboard.png
一直郁悶著 求如何解決

clipboard.png

clipboard.png

回答
編輯回答
蔚藍(lán)色

flex-wrap換行，控制flex是單行或者多行。同時(shí)橫軸的方式?jīng)Q定了新行堆疊的方向

2018年6月11日 17:07
編輯回答
薄荷糖

不知道用的是什么編輯器，裝個(gè)Autoprefixer插件直接跑遍兼容吧。

2018年4月24日 03:20
編輯回答
骨殘心

為了兼容性,建議不要使用flex簡(jiǎn)寫(xiě)
flex-grow
flex-shrink
flex-basis
分別加前綴
在一些舊版本瀏覽器上需要使用 box-flex

2018年1月13日 21:07
編輯回答
厭遇

關(guān)于 flex 兼容，低版本坑特別多。還是建議乖乖用 float 吧。

首先是低版本對(duì) flex 的大部分屬性都支持，但是 flex-wrap ，是一點(diǎn)都不支持的，建議用 display: inline-block 代替。

然后如果要用 flex 布局，切記子元素一定要是塊級(jí)元素，就是設(shè)置 display: block; 否則的話低版本是沒(méi)有 flex 效果的。高版本是不用設(shè)置的，行內(nèi)元素也支持 flex 布局。

2017年7月12日 14:51
編輯回答
大濕胸

可以直接js判斷換行啊，本來(lái)flex的兼容性就不是很好的

2017年2月2日 01:20