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

Question

如果我justify-content: space-between在Flex容器中有多个具有该属性的元素,并且我想绝对定位其中一个并从flex流中删除,如下所示:

这适用于Chrome,但不适用于IE和Firefox,因为绝对定位元素被视为0宽度,但仍然在flex流程中:

有没有修复这个保持布局的原因？

CodePen

Answer 1

事实证明，只需三个简单步骤

（演示）

1）。将每个子项的左右边距设置为自动

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

2）。将第一个子项的左边距设置为0

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

3）。将最后一个子项的右边距设置为0

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

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

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

编辑：

感谢@Pontiacks

显然你可以通过添加margin-left: auto到img:nth-child(2)

更新了jsfiddle