在IE11中,不会从正常流程中删除绝对定位的弹性项目

Question

我们有两个带内容的div和第三个div,它是具有绝对位置的背景.

Container是一个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

更新:此问题已在Firefox中解决(截至2017年3月发布的v52).问题仍然存在于IE11中.

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

Firefox计算绝对定位div,并在div之间分配空间,就像连续有3个div一样.

Firefox正在考虑第三个div(.bg),它是绝对定位的,一个流入的灵活项目,并将其纳入space-between计算中.(IE11也是这样; Chrome和Edge会忽略它.)

显然,这不符合当前的flexbox规范:

4.1.绝对定位的Flex儿童

由于它不在流动状态,Flex容器的绝对定位子元素不参与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>

或者...... .bg从Flex容器中删除:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="c2">Content 2</div>
</div>
<div class="bg">Background</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="c2">Content 2</div>
</div>
<div class="bg">Background</div>

或者...使用flex order属性重新排列弹性项目.

将其添加到您的代码中:

.c2 { order: 1; }

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;
  order: 1;
}
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 2

它正在发生,因为justify-content: space-between;均匀分配项目开头的第一项,结尾的最后一项.因此,只要推杆<div class="bg">Background</div>之间<div class="c1">Content 1</div>和 <div class="c2">Content 2</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 3

有时无法重新排序内容,例如使用::before和时::after.在这些情况下,您可以手动操作order元素.

在您的情况下,您需要做:

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

该order属性是flex规范的一部分,允许您重新订购Flex项目(MDN上的参考).它包含了多种用途,非常方便.

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

不过,Firefox的行为似乎违反直觉.position: absolute通常会删除通常dom流的元素,我希望该元素也可以从flex流中移除,就像在Safari和Chrome中一样.我不确定该规范是否澄清了这一点.