8

根据Mozilla自己的文档：

Firefox 仅支持单行 flexbox。

但是我想开始使用 flexboxes，因为现在所有现代浏览器都支持它（幸运的是，我不需要为这个项目定位 IE 9）。

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

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

相关问题：Flexbox 不包装弹性项目

我很确定我的大部分目标受众都在使用 Internet Explorer、Firefox 和 iOS 版 Safari。是否有一个 polyfill 可用于 Firefox 以获得所需的行为，或者我是否必须使用 Modernizr 回退到floats、widths 和clear修复（如果有，我什至在 Modernizr 中寻找什么？）

4

3 回答 3

13

不再需要 polyfill：flex-wrap: wrap对于 Firefox 28 及更高版本已修复，请在此处查看我的答案。

修复旧浏览器：对于“由 flexbox 解决”的演示，Philip Walton 使用了一个简单的 CSS polyfill：@supports not (flex-wrap: wrap)仅针对不支持的浏览器，flex-wrap: wrap据我所知：display: inline-block被使用。

于 2013-12-22T11:28:25.343 回答
0

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

请，任何想要此功能的人都应该通过将自己添加到 CC 列表来对下面的链接进行投票：

Firefox - 支持多行 flexbox（flex-wrap、align-content 属性）

于 2013-08-04T16:28:55.653 回答
-1

您可以使用flex-direction:column;而不是flex-flow:column;. 似乎是 Mozillas 圣杯中的错误https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example

于 2013-11-22T00:47:47.843 回答