用于Firefox的Flex-wrap polyfill

Question

根据Mozilla自己的文档:

Firefox仅支持单行Flexbox.

但是我想开始使用flexbox,因为现在所有现代浏览器都支持它(我不需要为这个项目很好地支持IE 9).

由于火狐只支持单行Flexbox的,唯一的好处,我得到了使用它是justify-content与可能align-items.在我看来,flexboxes的真正力量是flex-flow和flex-wrap,它允许响应式布局.

实际上,我尝试从Mozilla文档中复制Holy Grail Layout示例并在Firefox中打开它,它甚至在那里都没有正常工作.在order改变,但它仍然显示出一行的三个要素,而不是改变flex-flow.

相关问题:Flexbox未包装弹性项目

我非常确定我的大部分目标受众都在Internet Explorer,Firefox和Safari for iOS上.是否有一个我可以用于Firefox的polyfill来获得所需的行为,或者我是否必须使用Modernizr 来回溯floats,widths和clear修复(如果是这样,我甚至在Modernizr中寻找什么？)

Answer 1

不再需要填充填充:flex-wrap: wrap对于Firefox 28及以上版本已修复,请在此处查看我的答案.

针对旧版浏览器的修复:对于" 由flexbox解决 "的演示,Philip Walton使用简单的CSS polyfill:@supports not (flex-wrap: wrap)仅针对不支持的浏览器flex-wrap: wrap,并且据我所知:display: inline-block使用它代替.