Flexbox/IE11: flex-wrap: le wrap ne pas envelopper (Images + Codepen à l'intérieur)
J'ai créé une liste avec les icônes sociales. Ces icônes doivent s'enrouler sur les petits écrans.
- Je utiliser flex-wrap: wrap;
et il fonctionne parfaitement sous Firefox et Chrome:
Mais Internet Explorer 11 (et IE 10) ne sera pas briser la ligne:
Code Stylo Exemple
Afficher le code ici: http://codepen.io/dash/pen/PqOJrG
Code 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>
Code 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;
}
Ce qui semble être un IE bug qui s'affiche lorsqu'un flex de l'élément conteneur parent est défini à display: table;
. La suppression de cette ligne résout le problème. Mais j'ai besoin de display: table;
au centre du conteneur parent.
Toutes les idées comment obtenir IE11 pour envelopper les images?
Vous devez vous connecter pour publier un commentaire.
Essayer de définir une largeur pour le conteneur parent, par exemple
width: 20%;
. Ainsi, le conteneur sera mis en forme comme vous le souhaitez et flex-wrap va travailler. Et oui, vous pouvez supprimer ledisplay: table;
.