Flex 布局在各家瀏覽器下的一些bug，尤其是IE

1. Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. see bug. Fixed in all versions > 10.
2. IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation
3. In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
4. Firefox 51 and below does not support Flexbox in button elements. Fixed in version 52.
5. IE 11 does not vertically align items correctly when min-height is used see bug
6. Flexbugs: community-curated list of flexbox issues and cross-browser workarounds for them
7. In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
8. In Safari 10.1 and below, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. Fixed in all versions > 10.1 (See bug) The bug also appeared in Chrome but was fixed in Chrome 51

 

1. Safari 10 及以下用 min/max width/height 這些聲明來渲染彈性伸縮項目的尺寸，但是如果容器包含多行項目，它不會計算有多少項目在同一行上。相反它只簡單計算 flex-basis 的值，如果flex-basis 值未設置，默認為auto的話，則使用彈性項目設定的寬度。原文提供了該bug鏈接 - Safari (WebKit) doesn't wrap element within flex when width comes below min-width，給彈性伸縮項目寬度設定min-width后，在Safari瀏覽器中不會換行，這個bug在10以上的版本已修復。

2. （該被掃進歷史垃圾堆的IE8,9不支持flex。IE10以后支持了，要加-ms-前綴。就算是IE11，也不省心。來自本喵団団的吐槽）

在IE11下，flex: 0 1 auto; 第三個參數要加一個單位。（第三個參數就是flex-basis屬性的值。這個值可以是數字，比如長度單位或者百分比，也可以是auto，長度根據內容決定。）

看這里提供的鏈接，see MSFT documentation。

這里提到，微軟發布的新瀏覽器，Microsoft Edge對於flex-baisis的兼容情況：

不再支持 -ms-前綴，

支持flex-basis的值為auto，既長度等於項目的長度，如果未指定長度，根據內容決定。

Windows Phone 8.1 的IE 和 微軟Edge，可支持 -webkit-flex-basis 別名。

3. IE10、11-preview：flex容器如果設定了屬性flex-direction: column, 以及min-height，但是未設定高度，在計算子項目的尺寸時將出現偏差...這個bug已經在Edge解決。

（微軟的意思是，該進垃圾堆的老舊瀏覽器就趕緊扔掉，鼓勵用戶更新新的瀏覽器版本。又不是安全問題，反正寶寶就是不修復IE10的這個跟安全問題無關的bug。）

4. Firefox 51及以下版本不支持按鈕元素作為彈性容器，版本52已修復。 Flexbox in button elements. （按鈕元素比較特別，它不僅僅不支持flex，還不支持overflow:scroll, display:table等等。）

5. IE 11： Flex容器如果設定了min-height，那么 align-items: center; 不起作用。see bug

(看bug鏈接里描述的，設定height:auto; 並設定min-height,  align-items: center不能讓容器下的項目垂直居中。)

6.Flexbugs: 這是個gitub地址，精選了一些flex容器問題以及跨瀏覽器的解決辦法。目的是提供flex布局下出現bug的解決方案。

7. IE 10：felx的默認值是 0 0 auto。而最新規范的默認值是 0 1 auto。（第二個參數是flex-shrink，規范默認為1，如果空間不足，該子項目將縮小。而IE默認為0，則默認項目不縮小。）

Declaration	What it should mean	What it means in IE 10
(no flex declaration)	flex: 0 1 auto	flex: 0 0 auto
flex: 1	flex: 1 1 0%	flex: 1 0 0px
flex: auto	flex: 1 1 auto	flex: 1 0 auto
flex: initial	flex: 0 1 auto	flex: 0 0 auto

8. Safari 10.1 及以下版本：彈性伸縮項目的高度如果設置為百分比，無法被識別。10.1以后的版本，以及在Chrome51版本，這個bug得到修復。

 

下一篇將重點介紹IE瀏覽器，畢竟IE不奇葩誰奇葩