Flex-wrap polyfill for Firefox

Question

According to Mozilla's own documentation:

Firefox supports only single-line flexbox.

However I would like to start using flexboxes since it's mostly supported by all modern browsers now (I don't need to target IE 9 for this project luckily).

Since Firefox only supports single-line flexbox, the only benefit I get out of using it is justify-content and possibly align-items. In my opinion, the real power of flexboxes is flex-flow and flex-wrap, which allows for responsive layouts.

Actually, I tried copying the Holy Grail Layout example from the Mozilla documentation and opening it in Firefox and it didn't even work properly there. The order changed but it still showed the three elements in one row instead of changing the flex-flow.

Related question: Flexbox not wrapping flex items

I am pretty sure that most of my target audience is on Internet Explorer, Firefox, and Safari for iOS. Is there a polyfill that I can use for Firefox to get the desired behaviour or do I have to fallback to floats, widths, and clearfixes using Modernizr (and if so, what do I even look for in Modernizr?)

Answer 1

No polyfill needed any more: flex-wrap: wrap for Firefox 28 and up is fixed, please see also my answer here.

Fix for older browsers: For the "solved by flexbox" demos Philip Walton uses a simple CSS polyfill: @supports not (flex-wrap: wrap) is only targeting browsers with no support for flex-wrap: wrap, and as far as i understand it: display: inline-block is used instead.