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

Question

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

然后应用最后一个元素margin-right:auto;来推动元素离开（并且否定居中）。

除IE10/11以外的其他地方都能正常工作，并且一直让我发疯。

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;被忽略。

任何IE/flexbox专家在那里遇到过这样的事情？

Answer 1

这似乎是一个IE错误。

按照Flexbox的规范：

8.1. Aligning with auto margins

经由justify-content和align-self之前对准，任何阳性的自由空间被分配到汽车边距该维度。

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

换句话说，自动页边距优先于justify-content。实际上，如果元素应用了自动边距，则关键字对齐属性（例如justify-content和align-self）不起作用（因为自动边距占用了所有空间）。

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

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

（请注意，IE10建立在previous version of the spec上。）

---

解决方案

方法1：使用自动利润率只有

如果justify-content被删除，在IE10/11汽车利润率做工精细。 所以不要使用justify-content。一直使用自动边距。 （See examples of alignment with auto margins）。

方法2：使用一种无​​形的隔离DIV

创建visibility: 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: 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>