为什么这个CSS flexbox示例不适用于IE 11？

Question

我使用的是一个通常显示为行的flexbox布局，但是当屏幕是某个宽度时，它会切换到列。这在Chrome，Firefox，Safari和Edge中运行良好，但在IE 11上，即使我使用justify-content: space-around;

，flex元素也不会居中

我查看了https://github.com/philipwalton/flexbugs以及列出flexbox错误的其他网站，我似乎无法找到解决方案。

我把它简化为一个简单的例子来证明这个问题。

首先，我们有一个横跨屏幕宽度的容器，具有以下属性：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}

然后在里面我们有四个具有以下属性的单元格：

.cell {
  flex-grow: 2;
  text-align: center;
  display: inline-block;
  background-color: green;
  margin: 5px auto;
  min-width: 50px;
  max-width: 20%;
}

在IE上，四个单元格左对齐，但在任何其他浏览器上，单元格都居中对齐。

这是艺术家对情况的印象

我创建了一个JSFiddle，在https://jsfiddle.net/8w1gf7vx/4/

上演示了这个问题

Answer 1

您使用了错误的属性 - justify-content用于主轴上的对齐。您的flex-direction为column，因此主轴从上到下 - 因此此处所有justify-content都会影响和上方空间的分布>下面你的物品。

您希望在交叉轴上对齐项目 - 并且要实现的属性为align-items。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

https://jsfiddle.net/8w1gf7vx/6/

可以删除项目中的

text-align: center;和display:inline-block - 除非您想将这些用作不了解flexbox的浏览器的后备。 （我怀疑他们可能是你所拥有的似乎在其他浏览器中按预期工作的原因。正如Oriol在评论中指出的那样，这是由于保证金左/ -right is auto - 并且IE似乎不支持那个。）

http://flexboxfroggy.com/是一个很好的方式来更好地理解不同的flex属性做什么，以一个小游戏的形式 - 可能值得一看任何仍然与flexbox有点挣扎的人（包括我自己; - ）

免责声明：我不以任何方式加入该网站，我认为这对于更好地了解flexbox非常有用。