弹性容器中的绝对定位项仍然被视为 IE 中的项 &火狐 [英] Absolute positioned item in a flex container still gets considered as item in IE & Firefox

问题描述

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

If I have multiple elements with the property justify-content: space-between in a flex container and I want to absolute position one of them and remove from the flex flow, as showed here:

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

This works in Chrome but not in IE and Firefox as the absolute positioned element is considered as 0 width, but still in the flex flow:

是否有解决方法可以保持布局不变?

Is there a fix to this keeping the layout as it is?

CodePen

推荐答案

原来只需要三个简单的步骤

It turns out that all it takes is three simple steps

(演示)

1).将每个孩子的左右边距设置为自动

1). Set the left and right margin to auto on each child

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

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

2). Set the left margin on the first child to 0

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

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

3). Set the right margin on the last child to 0

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

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

If you miss any of these steps it will not work properly

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

This works in firefox and chrome, I haven't tested it in any other browsers.

感谢@Pontiacks

Thanks to @Pontiacks

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

Apparently you can get away with adding margin-left: auto to the img:nth-child(2)

更新了 jsfiddle

这篇关于弹性容器中的绝对定位项仍然被视为 IE 中的项 &火狐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！