1. 程式人生 > >flexbox在android4.1及之前的版本相容性問題

flexbox在android4.1及之前的版本相容性問題

經過了一番實踐和一些基本的相容處理,至少在移動端flexbox還是有可為的(安卓4.0+,2.3+沒測試,ios都還行)。但是坑也確實還有很多。
1,flexbox有多個版本,在低版本安卓下實行的是09年的舊版標準Flexible Box Layout Module
這個標準需要新增-webkit-字首。其餘的實行的是新的flexbox標準CSS Flexible Box Layout Module Level 1,其中ios9以下Safari需要新增-webkit-字首。
2,舊版flexbox標準各瀏覽器支援屬性有限,比如說不支援flex-wrap等。所以如果考慮相容性的話需要只使用舊版標準中瀏覽器可以支援的屬性。
3,還是舊版的問題,舊版的使用比例伸縮佈局時會導致盒子內容大小不等會導致無法‘等分’等佈局。這個時候需要設定width:0%;等把原始大小設定成0。
4,依舊是舊版的問題,舊版的box item要求屬性是塊級結構,所以很多inline元素需要設定display:block等才能顯示正常。
5, 新發現 text-overflow: ellipsis;在display:flex元素上無效。