用于 Firefox 的 Flex-wrap polyfill答案

【问题标题】：Flex-wrap polyfill for Firefox用于 Firefox 的 Flex-wrap polyfill
【发布时间】：2013-07-15 04:01:31
【问题描述】：

Firefox 仅支持单行 flexbox。

但是我想开始使用 flexbox，因为它现在是 mostly supported by all modern browsers（幸运的是，我不需要为这个项目定位 IE 9）。

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

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

相关问题：Flexbox not wrapping flex items

我很确定我的大多数目标受众是 Internet Explorer、Firefox 和 iOS 版 Safari。是否有一个 polyfill 可用于 Firefox 以获得所需的行为，还是我必须使用 Modernizr 回退到 floats、widths 和 clearfixes（如果是这样，我什至要寻找什么？在 Modernizr 中？）

【问题讨论】：

标签： css firefox cross-browser flexbox

【解决方案1】：

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

修复旧版浏览器：对于“solved by flexbox”演示，Philip Walton 使用了一个简单的 CSS 填充：@supports not (flex-wrap: wrap) 仅针对不支持 flex-wrap: wrap 的浏览器，并且尽可能我明白了：改用display: inline-block。

【讨论】：

源链接已损坏，但感谢@supports not (flex-wrap: wrap)

【解决方案2】：

您可以使用flex-direction:column; 代替flex-flow:column;。好像是Mozillas Holy Grail里的错误https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example

【讨论】：

【解决方案3】：

如您所知，该功能在 Firefox 上还没有准备好。我还没有找到任何用于 flex-wrap 的 polyfill。但我确实知道 Firefox flex-wrap 实现的精确增强问题。

请，任何想要此功能的人都应该在下面的链接上投票，将自己添加到 CC 列表中：

Firefox - Support multi-line flexbox (flex-wrap, align-content properties)

【讨论】：