绝对定位干扰在Flexbox中的flexbox定位
我对flexbox有点复杂的问题。基本上,我的演示在Chrome中运行,但不在Firefox中运行。下面是我的HTML代码:绝对定位干扰在Flexbox中的flexbox定位
<div class="flex-main-container">
<img src="http://www.modifiedstreetcars.com/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt="">
<img src="http://www.buntycars.com/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpg" alt="">
<figure>
<img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
<figcaption>explanatory caption</figcaption>
</figure>
<figure>
<img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
<figcaption>explanatory caption</figcaption>
</figure>
</div>
现在的文件有以下谈谈在Flex容器定位元素:
由于它是乱流,一个绝对定位的孩子flex 容器不参与弹性布局。
现在我已经定位的两个元件,即,图像绝对像这样:
.flex-main-container > img:nth-of-type(1) {
position: absolute;
left: 0;
top: 0;
}
.flex-main-container > img:nth-of-type(2) {
position: absolute;
left: 100px;
top: 150px;
}
现在容器我有以下代码上:
.flex-main-container {
background: #eee;
display: flex;
height: 500px;
align-items:flex-start;
justify-content:space-between;
flex-direction: column;
}
现在我期望剩下的元素散开垂直cally,因为我在主容器上有justify-content:space-between
。我确实在Chrome中获得了期望的行为。见下面的截图:
但在Firefox到底是什么错误你看到下面
请注意,在Firefox中的黑车图像不对齐右上就像它在Chrome中一样。不知何故,在Firefox中,绝对定位的元素似乎仍然会干扰其余元素的定位,我认为这不应该是这种情况。
有人可以解释为什么会发生这种情况吗?为什么Firefox允许绝对定位的元素干扰其他静态元素的定位?
P.S.这是一个“为什么”的问题。我不只是寻找一个“黑客”来解决这个问题,但我真的很感兴趣,为什么会发生这种情况。
谢谢。
这是因为old version of the spec的:
柔性容器的绝对定位的孩子不是自己 弯曲的物品,但他们留下“占位符”在杨树其正常 位置。这些占位符是宽度,高度和行高为'0'的匿名内联 框,并且它们通常与柔性框布局算法交互 。
这是later改性:
静态位置旨在更多或更少匹配 匿名0×0在流“柔性start'对准柔性项的位置该 参与了柔性布局中,主要差别在于任何 包装空间由于“证明含量:空间周围”或 “证明含量: - 之间的空间”围绕 假想项抑制
但Firefox没有实现这种改变。
http://*.com/a/36102124/3597276 –
@ Michael_B哈哈,谢谢。我记得我回答了类似的问题,但找不到它。 – Oriol
看起来像[Flexbox中的Firefox:物品未正确排列](http://*.com/q/32532377/1529630) – Oriol