Flex汽车保证金在IE10 / 11中不工作 [英] Flex auto margin not working in IE10/11

问题描述

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

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

最后一个元素有 margin-right：auto ;

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

除了IE10 / 11之外，它在所有地方都能正常工作，并一直驱动着我疯狂。

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

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

你会在屏幕上看到两个项目，应该在红色父边的左侧对齐（即它们都应居中，但最后一个项有 margin-right：auto; 已应用并填充整行，推其他项和自身在一侧） - 这是正确的行为。除非在IE10 / 11中两个项目都不正确居中，否则将忽略第二个项目的 margin-right：auto; 。

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.

任何IE / flexbox专家在这之前遇到过类似这样的事情？

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

推荐答案

这似乎是一个错误。 / h2>

根据flexbox规范：

This appears to be a bug.

According to the flexbox specification:

8.1。与汽车边距对齐

在通过 justify-content 和<$

注意：如果可用空间是分布式的对于自动边距，对齐属性在该维度中将不起作用，因为边距将会偷走弯曲后剩余的所有可用空间。

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.

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

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

事实上，应用了自动边距，则诸如 justify-content 和 align-self 的关键字对齐属性没有效果

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

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

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

IE10和IE11不合规。他们不是按自己的优先顺序排列或对齐自动边距元素。

IE10 and IE11 are not in compliance. They are not prioritizing or aligning the auto margin element as they should.

（注意IE10建立在以前的版本。）

方法1：仅使用自动边距

Method #1: Use auto margins only

c $ c> justify-content 被删除，自动边距在IE10 / 11中正常工作。
所以不要使用 justify-content 。一直使用自动边距。 （查看与汽车边距对齐的示例）。

If justify-content is 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).

方法2：使用不可见的分隔符div

Method #2: Use an invisible spacer div

创建第三个div visibility：hidden 和 flex-grow：1 。这将自然地将＃first-item 和＃second-item 移动到左边缘，而不需要自动边距

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

#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: 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 id='third-item'>third item</div>
</div>

这篇关于Flex汽车保证金在IE10 / 11中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！