如何修复 IE 11 中的 Flexbox 样式

Question

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

我的 flex-container 看起来像这样：

.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;
}

现在这些元素应该居中并适合几行，但它们都在同一行并且每行有 ~150px 而不是 250px。我试图添加显示：-ms-flexbox；但无论如何都行不通。通常它们都居中并占用3条线。

Answer 1

IE 11 要求在第三个参数中添加一个单位，即 flex-basis 属性

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

Answer 2

您似乎只在 webkit 上指定了 flex-wrap。默认情况下，flex 将在一行中容纳所有项目。您需要在容器上指定 flex-wrap: wrap。

如何修复 IE 11 中的 Flexbox 样式

How to fix Flexbox styles in IE 11

html

css

frontend

flexbox

internet-explorer-11