CSS Flex 自动边距在 IE10/11 中不起作用

Flex auto margin not working in IE10/11

提问by Michael

I have a complex layout where I center various elements vertically and horizontally with flexbox.

我有一个复杂的布局，我使用 flexbox 将各种元素垂直和水平居中。

The last element then has margin-right:auto;applied to push the elements left (and negate centering them).

然后margin-right:auto;应用最后一个元素将元素向左推（并否定将它们居中）。

This works correctly everywhere except on IE10/11 and has been driving me crazy.

除了在 IE10/11 上，这在任何地方都可以正常工作，并且让我发疯。

HTML/CSS sample:

HTML/CSS 示例：

#container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

#second-item {
  margin-right: auto;
}

/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: red;
}
#container > div {
  background: blue;
  padding: 10px;
  outline: 1px solid yellow;
}

<div id='container'>
  <div id='first-item'>first item</div>
  <div id='second-item'>second item</div>
</div>

http://codepen.io/anon/pen/NrWVbR

http://codepen.io/anon/pen/NrWVbR

You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has margin-right:auto;applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's margin-right:auto;is ignored.

您将在屏幕上看到两个项目，它们应该在红色父项的一侧左对齐（即它们都应该居中，但最后一个项目已margin-right:auto;应用并填充整行，将另一个项目和它本身推上）侧面） - 这是正确的行为。除了在 IE10/11 中，两个项目都错误地居中，即第二个项目margin-right:auto;被忽略。

Any IE/flexbox experts out there that have encountered something like this before?

任何 IE/flexbox 专家以前遇到过这样的事情吗？

回答by Michael Benjamin

This appears to be an IE bug.

这似乎是一个 IE 错误。

According to the flexbox specification:

根据 flexbox 规范：

8.1. Aligning with auto margins

Prior to alignment via justify-contentand align-self, any positive free space is distributed to auto margins in that dimension.

Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

8.1. 与自动边距对齐

在通过justify-content和对齐之前align-self，任何正自由空间都会分配到该维度的自动边距。

注意：如果可用空间分配到自动边距，对齐属性将对该维度无效，因为边距将窃取弯曲后剩余的所有可用空间。

In other words, auto margins take precedence over justify-content.

换句话说，自动边距优先于justify-content。

In fact, if an element has auto margins applied, then keyword alignment properties such as justify-contentand align-selfhave no effect (because the auto margins have taken all the space).

事实上，如果一个元素应用了自动边距，那么关键字对齐属性如justify-content和align-self就没有效果（因为自动边距已经占用了所有空间）。

Your code works as expected in Chrome and Firefox because those browsers are in compliance with the spec.

您的代码在 Chrome 和 Firefox 中按预期工作，因为这些浏览器符合规范。

IE10 and IE11 appear to not be in compliance. They are not applying the auto margin as defined in the spec.

IE10 和 IE11 似乎不合规。他们没有应用规范中定义的自动边距。

(Note that IE10 is built on a previous version of the spec.)

（请注意，IE10 是基于规范的先前版本构建的。）

---

---

Solutions

解决方案

Method #1: Use auto margins only

方法#1：仅使用自动边距

If justify-contentis removed, auto margins work fine in IE10/11. So don't use justify-content. Use auto margins all the way through. (See examples of alignment with auto margins).

如果justify-content被删除，自动边距在 IE10/11 中工作正常。所以不要使用justify-content. 一直使用自动边距。（请参阅使用自动边距对齐的示例）。

Method #2: Use an invisible spacer div

方法#2：使用隐形间隔div

Create a third div with visibility: hiddenand flex-grow:1. This will naturally shift #first-itemand #second-itemto the left edge, with no need for auto margins.

创建第三个 divvisibility: hidden和flex-grow:1。这自然会转移#first-item并#second-item向左边缘，而无需汽车的利润率。

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#third-item {
  flex-grow: 1;
  visibility: hidden;
}
/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: pink;
}
#container > div {
  background: cornflowerblue;
  padding: 10px;
  outline: 1px solid yellow;
}

<div id='container'>
  <div id='first-item'>first item</div>
  <div id='second-item'>second item</div>
  <div id='third-item'>third item</div>
</div>