绝对定位干扰Firefox中的flexbox定位

本文介绍了绝对定位干扰Firefox中的flexbox定位的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在flexbox上有一个复杂的问题。基本上，我的演示在Chrome中，但不是在Firefox中。下面是我的HTML代码：

< div class =flex-main-container> < img src =www.modifiedstreetcars/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv alt => < img src =www.buntycars/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpgalt => < figure> < img src =modscar/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpgalt = > < figcaption>说明标题< / figcaption> < / figure> < figure> < img src =modscar/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpgalt = > < figcaption>说明标题< / figcaption> < / figure> < / div>

现在文档中有关于flex容器中已定位元素的说明：

因为它是流出的，flex 容器的绝对定位的孩子不参与flex布局。

但是FIREFOX中的BUG是您在下面看到的

请注意，在Firefox中，黑色汽车图像与右上角不一致，就像在Chrome中一样。不知怎的在Firefox中绝对定位的元素仍然似乎干扰剩余元素的定位，我相信应该是这样。

有人可以解释为什么是这个发生？为什么Firefox允许绝对定位的元素干扰其他静态元素的定位？

P.S 这是一个为什么问题。我不只是在寻找一个黑客来解决这个问题，但我实际感兴趣的是为什么这是发生。

谢谢。

解决方案

这是因为旧版本的规范：

容器本身不是 flex项目，但是它们在框架树中的正常位置中留下占位符。这些占位符是带有width，height和line-height为'0'的匿名内联框，并且它们通常使用flexbox布局算法与交互。

这是以后修改：

静态位置旨在更多或更少匹配的位置一个匿名的0×0流入'flex-start'对齐的flex项目参与flex布局，主要的区别是任何包装空间，由于'justify-content：space-around'或'justify-content：space-between'在假设项目附近被抑制

不能实现这种变化。

I have a bit of a complex question on flexbox. Basically, my demo works in Chrome but not in Firefox. Below is my HTML code:

<div class="flex-main-container"> <img src="www.modifiedstreetcars/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt=""> <img src="www.buntycars/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpg" alt=""> <figure> <img src="modscar/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt=""> <figcaption>explanatory caption</figcaption> </figure> <figure> <img src="modscar/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt=""> <figcaption>explanatory caption</figcaption> </figure> </div>

Now the documentation has the following to say about positioned elements in flex containers:

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

MORE INFO HERE

Now I have positioned two elements, i.e., the images absolutely like so:

.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; }

Now on the container I have the following code:

.flex-main-container { background: #eee; display: flex; height: 500px; align-items:flex-start; justify-content:space-between; flex-direction: column; }

Now I would expect the remaining elements to spread out vertically since I have justify-content:space-between on the main container. I do get the desired behavior in Chrome. See screenshot below:

BUT THE BUG IN FIREFOX IS WHAT YOU SEE BELOW

Notice how in Firefox the black car image is not aligned to the top-right like it is in Chrome. Somehow in Firefox the absolutely positioned elements still seem to interfere in the positioning of the remaining elements, which I believe should't be the case.

Can somebody explain why is this happening? Why is Firefox allowing absolutely positioned elements to interfere in the positioning of other static elements?

P.S. This is a "WHY" question. I am not just looking for a "Hack" to fix this, but I am actually interested in why is this happening.

Thank you.

解决方案

That's because of an old version of the spec:

Absolutely positioned children of a flex container are not themselves flex items, but they leave behind "placeholders" in their normal position in the box tree. These placeholders are anonymous inline boxes with a width, height, and line-height of ‘0’, and they interact normally with the flexbox layout algorithm.

This was later modified:

The static position is intended to more-or-less match the position of an anonymous 0×0 in-flow ‘flex-start’-aligned flex item that participates in flex layout, the primary difference being that any packing spaces due to ‘justify-content: space-around’ or ‘justify-content: space-between’ are suppressed around the hypothetical item

But Firefox didn't implement that change.