Flexbox/IE11: flex-wrap: обертка не обертывается (изображения + Codepen внутри)

Я создал список с социальными иконками. Эти значки должны размещаться на маленьких экранах.

Я использую flex-wrap: wrap;, и он отлично работает в Firefox и Chrome:

Chrome, Firefox

Но Internet Explorer 11 (и IE 10) не разорвет строку:

IE 11

Пример кодового пера

Просмотрите код здесь: 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 обернуть изображения?


html css flexbox internet-explorer-11
person dash    schedule 24.06.2015    source источник

Ответы (1)


arrow_upward
39
arrow_downward

Попробуйте определить ширину для родительского контейнера, например. width: 20%;. Таким образом, контейнер будет отформатирован так, как вы хотите, и flex-wrap будет работать. И да, вы можете удалить display: table;.

person jhorapb    schedule 03.07.2015
comment
Хотя это решение не на 100% идеально, так как я не знаю ширину родительского контейнера, оно работает. Большое спасибо! - person dash; 07.07.2015
comment
Да, с процентами не нужно указывать явную ширину например в пикселях, а лучше делать это относительными значениями. - person jhorapb; 11.07.2015
comment
В том же духе вы можете добавить max-width к родителю, чтобы он обернулся в пределах вашего макета. - person Tony Smith; 08.02.2016
comment
@jhorapb Я знаю, что это решение может помочь в этом случае использования. Но какова реальная проблема с flex-wrap в IE10 или Edge? - person Amerrnath; 13.09.2016