Flex容器中的绝对定位项目仍然被认为是IE& Firefox [英] Absolute positioned item in a flex container still gets considered as item in IE & Firefox

问题描述

如果我有一个flex容器中的属性 justify-content：space-between 的多个元素，我想要绝对位置其中之一， ，如下所示：

这在Chrome中可用，但在IE和Firefox中不可用，因为绝对定位元素被认为是0宽度，但仍然在flex流程中：

有没有解决方案，保持布局原样？

CodePen

（演示）

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，我没有在任何其他浏览器测试它。

/ strong>

感谢@Pontiacks

显然你可以放弃 margin-left：auto 到 img：nth-​​child（2）

更新jsfiddle

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:

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

(Demo)

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

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

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

img:nth-child(2) {
    margin-left: 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

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

EDIT:

Thanks to @Pontiacks

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

updated jsfiddle

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