如何在 IE 11 中修复 Flexbox 样式答案

【问题标题】：How to fix Flexbox styles in IE 11如何在 IE 11 中修复 Flexbox 样式
【发布时间】：2016-11-09 17:51:38
【问题描述】：

我在这里使用 flexbox -http://marcinzalewski.net/exo/，但我无法为 IE 11 修复此问题。即使 Microsoft Edge 也能正常工作，而 IE 11 是我唯一需要修复的版本。

我的弹性容器看起来像这样：

.flex-container {
  max-width: 1240px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -webkit-flex-wrap: row wrap;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

这是我的内部元素代码：

.offer-element {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin-top: 60px;
  margin-left: 25px;
  margin-right: 25px;
}

现在这些元素应该居中并适合几行，但它们都在同一行中，并且每个元素都有 ~150 像素而不是 250 像素。我尝试添加显示：-ms-flexbox;但它无论如何都不起作用。通常它们都居中并取 3 行。

【问题讨论】：

标签： html css flexbox internet-explorer-11 frontend

【解决方案1】：

看起来您只在 webkit 上指定了 flex-wrap。默认情况下，flex 将所有项目都放在一行中。您需要在容器上指定flex-wrap: wrap。

【讨论】：

如果你没有遇到过这个，我发现它非常有用：css-tricks.com/snippets/css/a-guide-to-flexbox
不敢相信这么简单，非常感谢您的帮助，现在一切正常！
欢迎您 :) 请标记正确答案，以便其他遇到相同问题的人受益

【解决方案2】：

IE 11 需要将一个单位添加到第三个参数，即 flex-basis 属性

https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx

【讨论】：