Flex 自动边距在 IE10/11 中不起作用 [英] Flex auto margin not working in IE10/11

问题描述

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

最后一个元素应用 margin-right:auto; 将元素向左推(并否定它们居中).

这在除 IE10/11 之外的任何地方都能正常工作，并且让我发疯.

HTML/CSS 示例:

#container {显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-ms-flex-flow:行换行；-webkit-flex-flow:行换行；flex-flow:行包装；-ms-flex-pack:居中；-webkit-justify-content:中心；对齐内容:居中；-ms-flex-align:居中；-webkit-align-items:居中；对齐项目:居中；-ms-flex-line-pack:居中；-webkit-align-content:居中；对齐内容:居中；}#第二项{右边距:自动；}/* 只是一些颜色 - 不重要 */#容器 {高度:200px；宽度:100%；背景:红色；}#容器>div {背景:蓝色；填充:10px；轮廓:1px纯黄色；}

<div id='first-item'>第一项</div><div id='second-item'>第二项</div>

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

您将在屏幕上看到两个项目，它们应该在红色父级的一侧左对齐(即它们都应该居中，但最后一个项目有 margin-right:auto; 应用并填充整条线，将另一个项目及其本身推到一边) - 这是正确的行为.除了在 IE10/11 中，两个项目都没有正确居中，即第二个项目的 margin-right:auto; 被忽略.

有没有 IE/flexbox 专家遇到过这样的事情?

解决方案

这似乎是一个 IE 错误.

根据 flexbox 规范:

<块引用>

8.1.与自动边距对齐

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

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

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

事实上，如果一个元素应用了自动边距，那么诸如 justify-content 和 align-self 之类的关键字对齐属性就不起作用(因为自动边距有占用了所有空间).

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

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

(请注意，IE10 建立在之前版本的规范之上.)

<小时>

解决方案

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

如果删除 justify-content，自动边距在 IE10/11 中工作正常.所以不要使用justify-content.一直使用自动边距.(查看自动边距对齐示例).

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

使用 visibility: hidden 和 flex-grow:1 创建第三个 div.这将自然地将 #first-item 和 #second-item 移动到左边缘，无需自动边距.

#container {显示:弹性；flex-flow:行包装；对齐内容:居中；对齐项目:居中；对齐内容:居中；}#第三项{弹性增长:1；可见性:隐藏；}/* 只是一些颜色 - 不重要 */#容器 {高度:200px；宽度:100%；背景:粉红色；}#容器>div {背景:矢车菊蓝；填充:10px；轮廓:1px纯黄色；}

<div id='first-item'>第一项</div><div id='second-item'>第二项</div><div id='third-item'>第三项</div>

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

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

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

HTML/CSS sample:

#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

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.

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

解决方案

This appears to be an IE bug.

According to the flexbox specification:

8.1. Aligning with auto margins

Prior to alignment via justify-content and 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.

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

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).

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

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

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

---

Solutions

Method #1: Use auto margins only

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).

Method #2: Use an invisible spacer div

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: 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>

这篇关于Flex 自动边距在 IE10/11 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！