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 不会将文本换行或挤压到屏幕的一侧

第3节 讲解flex布局容器?六?大属性之flex-wrap和flex-flow

如何为flexbox,row,no-wrap添加换行符?

弹性布局的属性