相关疑难解决方法(0)

我们有两个带内容的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 …

Flex容器的所有子容器(由display: flex或指定display: inline-flex)自动生成弹性项目.Flex项目没有显示属性; 相反,我们将其设置为其他值,具体取决于我们希望如何布置Flex项目的子项.

所以,如果我display在Y元素上设置X值(考虑到Y参与flex上下文,即Y是一个flex项),我可以确定我将始终获得行为的flex项(在这个格式化上下文,在flex容器中)就像一个块级元素？

(换句话说,无论X = block/inline/table-cell/inline-grid/...等,Y都参与块格式化上下文,对吧？)

• X - 非块值
• Y - flex-item,html元素

这个:

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: inline;">item</div>
</div>

等于此(没有任何副作用)

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: block;">item</div>
</div>