Flex 佈局在IE瀏覽器下的糟糕表現
原文地址：gitub上的Flexbugs list，可以看到Flex佈局在IE糟糕表現的詳細描述。
2. Column flex items set to align-items:center overflow their container
flex 容器如果設定豎排，並且垂直居中，flex子專案的文字會溢位容器。解決辦法是給子專案設定一個 max-width:100%。Edge修復了這個bug。
下面這段程式碼，來動手看下在IE10、11下的表現。
<style>
.FlexContainer {
align-items: center;
background: hsla(0,0%,0%,.1);
display: flex;
/*display: -ms-flexbox;*/
flex-direction: column;
/*-ms-flex-direction: column;*/
height: 200px;
justify-content: center;
margin: 1em;
padding: 2em;
width: 300px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
padding: 1em;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
</div>
</div>
</body>
在IE11下預覽，如圖：
經過試驗發現，就算不設定 flex-direction:column, 這段文字依舊義無反顧地溢位，而不會像在其他瀏覽器下那樣，自動換行。比如Chrome瀏覽器：
給子專案設定 max-width: 100%，並不會對其他瀏覽器造成額外的影響。
為什麼會這樣？原來和 flex-shrink 的預設值有關係。IE預設為 0，既空間不足，專案不縮小。
但是如果設定了 flex-shrink 為 1 呢，IE 依舊固執地不縮小這個專案，原因在於容器同時設定了 flex-direction:column 和 align-items:center。
原來是這倆屬性在IE10不能並存。只要取消其中一個，並把flex-shrink設定為1，該溢位問題就可以得到解決。
4. flex shorthand declarations with unitless flex-basis values are ignored
簡寫的flex屬性，第三個引數 flex-basis 的值如果不寫單位，在IE10,11下會該 flex 被忽略。比如 flex: 0 1 0%; 這個百分號不能省略。
Edge修復了這個bug。
也可以寫成0px，但是推薦用0%。因為有些CSS壓縮工具會把 0px 轉換成 0，而不會對 0% 下手轉換。
5. Column flex items don't always preserve intrinsic aspect ratios
豎排彈性容器下，如果子項寬度大於容器寬度，子項並不會隨著容器保持寬高比例。
解決辦法是給這個子項再包裹一個容器，這樣子項就不再是一個伸縮專案，尺寸上就可以正常縮放。
<style>
* 1. Add a wrapper element to house the element with an intrinsic aspect ratio.*/
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
height: 300px;
margin: 1em;
width: 300px;
}
.FlexItem { /* 1 */
flex-shrink: 0; /* 2 */
}
img {
height: auto;
width: 100%;
}
</style>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
<img src="http://placehold.it/800x200/333">
</div>
</div>
</body>
比如這個圖片寬高為800*200，Flex容器寬度300。給圖片加一個容器，圖片正常縮放。小聲的說，這個問題貌似Chrome也有呢...
6. The default flex value has changed
新的規範更改了flex的預設值，而IE10，11依舊沿用舊的預設語法。如圖：
| 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 |
7. flex-basis doesn't account for box-sizing:border-box
flex-basis如果有一個明確的值，既除了auto以外的值，那麼該專案就相當於有一個明確的寬度/高度，佔據固定空間。
在IE10/11下，盒子內容的寬度是 flex-basis 設定的具體的寬度，它會無視我們設定的 box-sizing:border-box;
如果 flex-basis 值是100%，元素就會溢位容器。比如看這段程式碼在IE下的表現：
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
background-clip: padding-box;
border: 1em solid transparent;
box-sizing: border-box;
flex: 0 0 100%;
padding: 1em;
text-align: center;
}
</style>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">Item with padding and border</div>
</div>
</body>
在IE11的效果如下：
這個bug在Edge已經修復。但是基於IE10和11的廣大使用者群，還是得想辦法解決。解決辦法有兩種：
1. flex-basis 設定為 auto，不給它設定具體寬度，然後再給這個元素加一個 width:100%。
2. 給子項再包裹一個容器，把這個容器當成flex容器的子項，在這個容器上設定 flex: 0 0 100%。
8. flex-basis doesn't support calc()
IE10 、11，不支援 flex 第三個引數 flex-basis 的值為 calc()。如圖：
IE11下直接報錯，單獨寫 flex-basis 則可以識別。
而在IE10下，無論簡寫不簡寫，都無法識別這個值。
解決辦法：
1. 針對IE10和IE11：
.FlexItem {
flex: 0 0 auto;
width: calc(100%/3);
}
2. 如果是IE 11，不採用flex簡寫即可。
.FlexItem {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100%/3);
}
12. Inline elements are not treated as flex-items （嗯，為什麼跳到12了，因為忽略掉的那幾個是其他瀏覽器的。本文只批判IE）
IE10、11: 內斂元素不能作為彈性伸縮專案，包括:before 和 ::after 這些偽類元素。
IE11修復了這個bug，但是 :before 和 ::after 仍然不能作為伸縮彈性專案。
解決辦法是給內聯元素加個 display: block; 即可。
13. Importance is ignored on flex-basis when using flex shorthand
flex: 0 0 100%!important;
給flex簡寫加 !important，在IE10，只對前兩個引數有效，第三個引數無效。這個bug在IE11修復。而在IE10，再單獨寫上flex-bsis即可：
.FlexItemImportantOverride {
flex: 0 0 100%!important;
flex-basis: 100%!important;
}
實際專案應用中的補充：
在IE10，justify-content 對子專案的span不起作用。這時候把span設定為 display:block; 即可。