Flex自动边距在IE10/11中不起作用
我有一个复杂的布局,我用flexbox垂直和水平居中各种元素。Flex自动边距在IE10/11中不起作用
然后应用最后一个元素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专家在那里遇到过这样的事情?
这似乎是一个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>
为什么不直接取消自动利润率,并保持证明内容? –