flex已知bug

當然我沒扯淡發表於2019-03-03
Flex

根據微小的專案經驗目前發現 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已知bug


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

flex已知bug

其實這並不是一個bug, 這是我在理解flex時出現了偏差.右邊的文字雖然設定了寬度,但是並未設定超出隱藏.所以它被內容擠壓從而形成這種情況.不知道為什麼我就認為設定flex:1的元素天然具有overflow: hidden;的屬性.顯然這是一個錯誤的認知.
解決辦法是給文字元素overflow: hidden屬性即可.

高寬繼承問題

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

你可以參考這篇文章.解決高度不能繼承的問題.寬度繼承問題目前只是聽人說起不曾遇到過.

定位問題

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

這一點現在還沒有好的解決辦法，目前在 flex 慎用定位

相關文章