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。我试着添加display：-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样式

2 个答案: