css - 用于 Firefox 的 Flex-wrap polyfill

Question

根据 Mozilla's own documentation :

Firefox supports only single-line flexbox.

但是我想开始使用 flexboxes 因为它是 mostly supported by all modern browsers现在(幸运的是我不需要为这个元素定位 IE 9)。

由于 Firefox 只支持单行 flexbox，我使用它的唯一好处是 justify-content 和可能的 align-items。在我看来，flexboxes 的真正力量是 flex-flow 和 flex-wrap，它们允许响应式布局。

实际上，我尝试复制 Holy Grail Layout example从 Mozilla 文档并在 Firefox 中打开它，它甚至在那里无法正常工作。 order 改变了，但它仍然在一行中显示三个元素，而不是改变 flex-flow。

相关问题:Flexbox not wrapping flex items

我很确定我的大部分目标受众都在使用 Internet Explorer、Firefox 和 Safari for iOS。是否有 polyfill 可用于 Firefox 以获得所需的行为，或者我是否必须回退到 float、width 和 clear使用 Modernizr 进行修复(如果是这样，我什至在 Modernizr 中寻找什么？)

Answer 1

不再需要 polyfill:Firefox 28 及更高版本的 flex-wrap: wrap 已修复，另请参阅我的回答 here .

针对旧浏览器的修复:对于“solved by flexbox”演示 Philip Walton 使用简单的 CSS polyfill:@supports not (flex-wrap: wrap) is only针对不支持 flex-wrap: wrap 的浏览器，据我所知:改为使用 display: inline-block。