弹性容器中的绝对定位项目在 IE 和 Firefox 中仍被视为项目

Question

如果我在 flex 容器中有多个带有属性 justify-content: space-between 的元素，我想绝对定位其中一个元素并从 flex 流中移除，如下所示：

这在 Chrome 中有效，但在 IE 和 Firefox 中无效，因为绝对定位元素被视为 0 宽度，但仍在 flex 流中：

是否有解决此问题的方法？保持布局不变？

CodePen

Answer 1

原来只需要简单的三步

(Demo)

1).在每个 child

上将左右边距设置为自动

img {
    margin-left: auto;
    margin-right: auto;
}

2).将第一个 child 的左边距设置为 0

img:nth-child(2) {
    margin-left: 0;
}

3).将最后一个 child 的右边距设置为 0

img:last-child {
    margin-right: 0;
}

如果您错过这些步骤中的任何一个，它将无法正常工作

这适用于 firefox 和 chrome，我还没有在任何其他浏览器中测试过它。

编辑：

感谢@Pontiacks

显然，您可以将 margin-left: auto 添加到 img:nth-child(2)

updated jsfiddle

Answer 2

我有一个更简单的 hack 来解决这个特定问题。

div {
  background-color: #66BB66;
  display: flex;
  position: fixed;
  width: 100%;
  justify-content: space-between;
}
div > img:nth-child(2) {
  position: absolute;
  left: 0;
}

<div>
  <img src="http://www.fillmurray.com/150/150">
  <img src="http://www.fillmurray.com/150/100">
  <img src="http://www.fillmurray.com/150/150">
</div>

只需更改 DOM 中的顺序即可。绝对定位的元素仍然定位在你放置它的任何地方，虽然 flexbox 仍然像在流中一样对待它，但它在流中的位置（在 dom 中）导致 flexbox 分配 space 相同跨浏览器的方式。

我相信您可以使用命令属性来实现相同的目的。

Answer 3

我发现其中 none 处理了我的情况，因为我有三个元素，我想要均匀分布，一个绝对定位的兄弟。我发现在这种情况下的诀窍是将 margin-right: auto 添加到要均匀分布的第一个元素，并将 margin-left: auto 添加到要均匀分布的最后一个元素。你可以在这个 fiddle http://jsfiddle.net/tch6y99d/

查看

弹性容器中的绝对定位项目在 IE 和 Firefox 中仍被视为项目

Absolute positioned item in a flex container still gets considered as item in IE & Firefox

css

css-position

absolute

flexbox