绝对定位的Flex项目不会从Firefox和IE11的正常stream程中移除

我们有两个div的内容和第三个div是绝对位置的背景。

容器是一个flexbox。

所有在Chrome和Safari中运行正常，但Firefox和IE11计算绝对定位的div，并且在div之间分配空间，就像有3个div一样。

我做了一个jsfiddle的例子。 有没有办法解决这个错误？ https://jsfiddle.net/s18do03e/2/

div.container { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-between; width: 100%; outline: 1px solid; } div.c1 { background: #aaeecc; width: 100px; position: relative; z-index: 50; top: 20px; display: flex; } div.c2 { background: #cceeaa; width: 200px; position: relative; z-index: 50; top: 20px; display: flex; } div.bg { background: #ccc; width: 100%; height: 100%; z-index: 0; left: 0px; top: 0px; position: absolute; display: flex; } 

 <div class="container"> <div class="c1">Content 1</div> <div class="c2">Content 2</div> <div class="bg">Background</div> </div> 

Answer 1

这是因为justify-content: space-between; 平均分配项目开始的第一个项目，最后一个项目。 所以只需在<div class="c1">Content 1</div>和<div class="c2">Content 2</div>之间input<div class="bg">Background</div>

 <div class="container"> <div class="c1">Content 1</div> <div class="bg">Background</div> <div class="c2">Content 2</div> </div> 

你可以在https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content上看到原因;

Answer 2

就像你在问题中写的那样：

Firefox计算绝对定位的div，并分配像divs一样有3个div的空间。

Firefox正在考虑第三个div（ .bg ），它是绝对定位的，一个stream入弹性项目，并将其分解到计算space-between 。 （IE11也这样做; Chrome和Edge忽略它。）

显然，这不符合当前的Flexbox规范：

4.1。 绝对定位的Flex儿童

由于stream量不足，Flex容器的绝对定位子不参与灵活布局。

以下是一些解决方法：

为什么不移动另外两个绝对定位的div？

而不是这个：

 <div class="container"> <div class="c1">Content 1</div> <div class="c2">Content 2</div> <div class="bg">Background</div> </div> 

尝试这个：

 <div class="container"> <div class="c1">Content 1</div> <div class="bg">Background</div> <div class="c2">Content 2</div> </div> 

 div.container { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-between; width: 100%; outline: 1px solid; } div.c1 { background: #aaeecc; width: 100px; position: relative; z-index: 50; top: 20px; display: flex; } div.c2 { background: #cceeaa; width: 200px; position: relative; z-index: 50; top: 20px; display: flex; } div.bg { background: #ccc; width: 100%; height: 100%; z-index: 0; left: 0px; top: 0px; position: absolute; display: flex; } 

 <div class="container"> <div class="c1">Content 1</div> <div class="bg">Background</div> <div class="c2">Content 2</div> </div> 

Answer 3

有时不可能重新排列东西，例如使用::before和::after 。 在这些情况下，您可以手动order元素。

在你的情况下，你需要做的是：

 .c1 { order: -1; } .c2 { order: 10; } 

order属性是flex规范的一部分，可让您重新sorting弹性项目（ MDN上的参考 ）。 这是包括多种用途的非常方便。

我使用了-1因为值是有序的，所以将其设置为负数确保它在所有其他默认值之前，并且不需要指定::before的值。 出于同样的原因，使用10确保第二个div最后一个，即使你添加一堆元素的容器。 你可以增加到100或其他。

尽pipe如此，Firefox的行为似乎违反了直觉。 position: absolute通常会删除通常的domstream的元素，我也希望元素也可以从flexstream中移除，就像在Safari和Chrome中一样。 我不清楚规范是否澄清这一点。

Answer 4

作为替代，您可以在内容select器中使用flex属性：

  div.c1 { background: #aaeecc; width: 100px; position: relative; z-index: 50; top: 20px; display: flex; flex: 1; /* add this */ } 

这将设置flex-grow。 这可能不是你所需要的，但也许它可以帮助其他人无法重新排列内容div或从flex包装中取出它们。

这里是演示： https ： //jsfiddle.net/s18do03e/14/