Flexbox/IE11: flex-wrap: wrap nie oblewa się (Images + Codepen inside)

Question

Stworzyłem listę z ikonami społecznościowymi. Te ikony powinny zawijać się na małych ekranach.

używam flex-wrap: wrap; i działa idealnie w Firefox i Chrome:

Ale Internet Explorer 11 (i IE 10) nie złamie linię:

Pióro kodu Przykład

Zobacz kod tutaj: http://codepen.io/dash/pen/PqOJrG

HTML kod

<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> 

kod 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; 
} 

To wydaje się być IE bug, który pojawia się, gdy pojemnik rodzic Flex elementu jest ustaw na display: table;. Usunięcie tej linii rozwiązuje problem. Ale potrzebuję display: table; do wyśrodkowania kontenera nadrzędnego.

Jakieś pomysły, jak uzyskać IE11 do zawijania obrazów?

Answer 1

Spróbuj zdefiniować szerokość kontenera nadrzędnego, np. width: 20%;. W ten sposób kontener zostanie sformatowany według uznania, a funkcja Flex-wrap będzie działać. I tak, możesz usunąć display: table;.