Html Flexbox/IE11: flex-wrap: wrap does not wrap (Images + Codepen inside)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31022747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox/IE11: flex-wrap: wrap does not wrap (Images + Codepen inside)
提问by dash
I created a list with social icons. Those icons should wrap on small screens.
我创建了一个带有社交图标的列表。这些图标应该环绕在小屏幕上。
I use flex-wrap: wrap;and it works perfect in Firefox and Chrome:
我使用flex-wrap: wrap;它在 Firefox 和 Chrome 中完美运行：
But Internet Explorer 11 (and IE 10) will not break the line:
但是 Internet Explorer 11（和 IE 10）不会打破这一行：
Code Pen Example
代码笔示例
View the code here: http://codepen.io/dash/pen/PqOJrG
在此处查看代码：http: //codepen.io/dash/pen/PqOJrG
HTML 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>
CSS 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;
}
This seems to be a IE bug which shows up when a flex element's parent container is set to display: table;. Removing this line fixes the problem. But I need display: table;to center the parent container.
这似乎是一个 IE 错误，当 flex 元素的父容器设置为display: table;. 删除此行可解决问题。但我需要display: table;将父容器居中。
Any ideas how to get IE11 to wrap the images?
任何想法如何让 IE11 包装图像？
回答by jhorapb
Try defining a width for the parent container, e.g. width: 20%;. Thus, the container will be formatted as you want and flex-wrap will work. And yes, you can remove the display: table;.
尝试为父容器定义一个宽度，例如width: 20%;. 因此，容器将根据需要进行格式化，并且 flex-wrap 将起作用。是的，您可以删除display: table;.
