Flexbox/IE11：flex-wrap：包裹不包裹（圖片+ Codepen裏面）

Question

我創建了一個包含社交圖標的列表。這些圖標應該包裝在小屏幕上。

我用flex-wrap: wrap;和它完美的作品在Firefox和Chrome：

不過IE 11（和IE 10）不會打破行：

代碼筆示例

查看此代碼：http://codepen.io/dash/pen/PqOJrG

HTML代碼

<div> 
    <ul> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    </ul> 
</div> 

CSS代碼

body {background: #000;} 

div { 
    background: rgba(255, 255, 255, .06); 
    display: table; 
    padding: 15px; 
    margin: 50px auto 0; 
} 

ul { 
     display: -webkit-flex; 
     display: -ms-flexbox; 
    display: flex; 
     -webkit-flex-wrap: wrap; 
     -ms-flex-flow: row wrap; 
    flex-wrap: wrap; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
    justify-content: center; 
    list-style: none; 
    padding: 0; 
} 

li { 
    background: purple; 
    margin: 4px; 
} 

img { 
    display: block; 
    height: 40px; 
    padding: 7px; 
    width: 40px; 
} 

這似乎是一個IE錯誤，這顯示了當Flex元素的父容器設置爲display: table;。刪除這條線可以解決問題。但我需要display: table;來居中父容器。

任何想法如何讓IE11包裝圖像？

Answer 1

嘗試定義父容器的寬度，例如width: 20%;。因此，容器將被格式化，並且flex-wrap將會工作。是的，你可以刪除display: table;。