Flexbox/IE11:flex-wrap:换行不换行(里面有图片 + Codepen)
Posted
技术标签:
【中文标题】Flexbox/IE11:flex-wrap:换行不换行(里面有图片 + Codepen)【英文标题】:Flexbox/IE11: flex-wrap: wrap does not wrap (Images + Codepen inside) 【发布时间】:2015-09-10 10:20:18 【问题描述】:我创建了一个包含社交图标的列表。这些图标应该环绕在小屏幕上。
我使用flex-wrap: wrap;
,它在 Firefox 和 Chrome 中完美运行:
但 Internet Explorer 11(和 IE 10)不会断线:
代码笔示例
在此处查看代码:http://codepen.io/dash/pen/PqOJrG
HTML 代码
<div>
<ul>
<li><a href="#"><img src="http://placehold.it/40x40" ></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" ></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" ></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" ></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" ></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" ></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" ></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" ></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 包装图像?
【问题讨论】:
【参考方案1】:尝试为父容器定义一个宽度,例如width: 20%;
。因此,容器将根据您的需要进行格式化,并且 flex-wrap 将起作用。是的,您可以删除display: table;
。
【讨论】:
虽然这个解决方案不是 100% 完美,因为我不知道父容器的宽度,但它可以工作。非常感谢! 是的,对于百分比,您不需要定义明确的宽度,例如以像素为单位,最好通过相对值来完成。 按照同样的思路,您可以向父级添加一个最大宽度,以使其包裹在您的布局范围内。 @jhorapb 我知道这个解决方案可能有助于这个用例。但是在 IE10 或 edge 中使用 flex-wrap 的实际问题是以上是关于Flexbox/IE11:flex-wrap:换行不换行(里面有图片 + Codepen)的主要内容,如果未能解决你的问题,请参考以下文章
css flexbox IE11 flex 项目内容脱离容器
React Native Flex-Wrap 不会将文本换行或挤压到屏幕的一侧