使用Flexbox碰到了什麼樣的坑？

01-14

你在PC端和Mobile端使用CSS3 Flexbox Layout碰到了什麼樣的坑？又是怎麼填的這個坑呢？我想將這些坑整理成集：W3cplus/flexbox · GitHub

經過了一番實踐和一些基本的兼容處理，至少在移動端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元素上無效。

建議使用autoprefixer等工具進行代碼補全。不然會很痛苦的。。

參考Can I use... Support tables for HTML5, CSS3, etc

某些瀏覽器 flex item 需要 display: block，好像很多國產瀏覽器是這樣

處理國產瀏覽器的 flexbox 規範兼容性的時候，不要用能力檢測，要用 UA 檢測。部分國產瀏覽器不支持規範也把屬性都加上了。

有些三星的機子只支持display:box;的寫法，不認flex的寫法。

而flex又有幾套標準感覺挺分裂的。保險寫法可以用sass,less之類的工具做寫法的補全。

另外在react native上支持的那一套又是另外的實現方案。

面對這個問題，我都不敢用了，表示 (/ □ )

坐等題主有朝一日整理成章，感激涕零，不以言表

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

定義一個 flex 元素的完整 css 寫法如上，手工寫較為繁瑣

如果用gulp-autoprefixer 的話配置項browsers 應該為：

["last 2 versions", "&>1%", "Android &>= 3.2", "Firefox &>= 20", "iOS 7"];

確保覆蓋較低android 版本的瀏覽器

如果使用postcss 中的 autoprefixer，因為autoprefixer 使用 Browserslist(所有工具共享環境參數)，所以在package.json 中增加 :

"browserslist": [

"> 1%",

"last 2 versions",

"Android &>= 3.2",

"Firefox &>= 20",

"iOS 7"

]

講一個坑：

flex容器的子元素通常不能正常使用百分比長度，但如果子元素是position: absolute就可以拿到百分比長度。。。測試瀏覽器為Chrome。

參考此codepen:

A Pen by Peng

狗日的微信用了mx5內核之後，對這個支持不好

也遇到過一次，我的情況是私有前綴屬性寫在了標準屬性的後面，在ios8系統上flex1不等分，後來將標準屬性放在私有前綴屬性後面解決問題

最近display:flex火了，flex彈性布局更符合移動設備，所以這個必然會成為大趨勢，我最近也在研究這個，還挺有意思的。我在學習過程當中自己整理了兩篇這方面的文章，想學習了解的可以到我網站看看，文章有點長，耐不住寂寞的繞過！《CSS3 Flex 彈性布局用法詳解》、《CSS3 Flexbox輕鬆實現元素的水平居中和垂直居中》。 - 雲庫網，雖然目前支持這個屬性的瀏覽器還不是很多，但是看到了IE都升級了Edge，我相信瀏覽器的更新換代很快就會到來！喜歡研究WEB前端的朋友可以過來相互學習，交流！

今天就用flex寫了一個H5頁面，在谷歌瀏覽器和我自己的手機(安卓系統)，布局都是正確，可是一上到蘋果系統就開始出錯了！！！坑啊，保險起見還是用浮動布局吧

1.頁面垂直滾動問題：解決辦法是給需要隱藏滾動條的元素設置overflow-y: auto; 且元素必須要明確設定height

2.子元素要繼承父元素height時，父元素設置relative, 自元素設置absolute

測試瀏覽器Chrome

好像display：box目前更適合移動端布局

2017.12 firefox 58.2 flex盒子overflow:scroll 沒法滾動 chromium沒問題

找到解決方法了

給彈性子元素加上了高度或min-height可以解決……例如min-height:0

坑…………

當父元素為 flex，子元素的position 設為 absolute 的時候，並且不設置left、top rightbottom，火狐和chrome中子元素的位置不一樣，比如這樣，JS Bin ，我通過flex設置了水平和垂直居中，但是火狐是左上角為中心，chrome 是元素中心為中小

可以在 chrome 和 Firefox 中試下，我的 Firefox 是51

微信2016年3月升級內核，已經支持了最新的flexbox語法

在chrome的移動設備模擬器中模擬iPhone顯示的效果，與在iPhone手機瀏覽器中的顯示效果不一樣。經檢驗，應該是瀏覽器對flex屬性的支持問題：

flex-direction: column; /*該屬性在Chrome、Firefox、IE11中都得到支持，但Safari（在iPhone和Machine上測試）都不起效果。查過http://caniuse.com，也沒人提過這個bug。表示無奈。*/

-------------------------------

9.15更新：不好意思，學藝不精，經調試，基本上所有的flexbox與最新版本safari for iOS的兼容問題，都可以用用-webkit-前綴做hack

節後回來就要投奔到觸屏組奮鬥了，大神們分享一下移動端的各種坑，打個前站預防一下，防被慘虐

使用的時候最坑的就是安卓低於4.4版本的。有的手機支持。有的手機不支持。

只能降級處理~使用了浮動柵格處理了