Flex-wrap polyfill for Firefox
cross-browser, css, firefox, flexbox
Solution
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.
Problem
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 `float`s, `width`s, and `clear`fixes using Modernizr (and if so, what do I even look for in Modernizr?)