flex已知bug

根據微小的項目經驗目前發現 flex 佈局的如下 bug。固然 flex 佈局兼容 ie9 以上。有很屬性都須要兼容寫法，建議使用 autoprefixer 插件自動補齊兼容寫法。

塊級元素

flex的子元素爲非塊級元素時，flex佈局在ie10如下和一些國產瀏覽器中無效。

解決方式爲設定每一個子元素都爲display:block。

文字溢出

在使用flex佈局的元素text-overflow: ellipsis;是無效的。

.box {
  display:flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

複製代碼

文字溢出省略號顯示是無效的

解決方法爲套一個元素。

內容超出

下面是一個廣泛的佈局。

父級爲flex佈局有固定寬度，圖片寫死寬度，其他部分使用 flex:1佔據剩餘空間字體超出隱藏。這樣可能會碰見文字超出隱藏無效，圖片會被文字擠壓的很小。

其實這並非一個bug, 這是我在理解flex時出現了誤差.右邊的文字雖然設置了寬度,可是並未設置超出隱藏.因此它被內容擠壓從而造成這種狀況.不知道爲何我就認爲設置flex:1的元素自然具備overflow: hidden;的屬性.顯然這是一個錯誤的認知. 解決辦法是給文字元素overflow: hidden屬性便可.

高寬繼承問題

當父元素設置flex,子元素設置flex:1孫元素設置height:100%或width:100%時會發現無效.這個問題主要出如今老版本的國產瀏覽器上.這個問題的本質仍是flex佈局的元素在高寬度繼承上有bug.

你能夠參考這篇文章.解決高度不能繼承的問題.寬度繼承問題目前只是聽人提及未曾遇到過.

定位問題

在某些國產瀏覽器中會出現子元素絕對定位中心點偏移的問題。

這一點如今尚未好的解決辦法，目前在 flex 慎用定位