Flexbox browser support
Three versions of the flexbox spec – each with different syntax – have been implemented in browsers.
The two 2012 specs are roughly equivilant in terms of features, differing mainly in syntax. The earlier 2009 spec is less comprehensive though covers a lot of the same ground.
-
Opera 12.1+, Firefox 22+. Chrome 21 -webkit-
-
Internet Explorer 10 -ms-
-
Firefox 2+ -moz-, Chrome 4+ -webkit-, Safari 3.1+ -webkit-. iOS Safari 3.2+ -webkit-
More browser support info available on caniuse.com.
Known issues
Flexbox early 2012
Flexbox early 2012 (Internet Explorer 10)
Flexbox 2009
Box wrapping is not supported. box-lines is the property in this spec to achieve wrapping, though unfortunately no browser implemented it.
Ordering flex-items with box-ordinal-group requires a positive integer (the value 0 is also valid in Firefox but not in Webkit, so just use positive integers).
Flexbox 2009 (Firefox)
Firefox has a number of non-trivial issues with its 2009 implementation:
The setting display: box is treated as display: inline-box if there is no width set.
Percentage widths set on flex items are ignored.
The setting box-align: justify (equiv. justify-content: space-between) does not work.
Flexbox ignores overflow: hidden and expands the flexbox child when the content is larger than the child’s width.
The outline on flexbox children is padded as if by a transparent border of the same width.
If you set box-flex to 0, Firefox forces the element to act like it’s using the quirks-mode box model.
Further reading
Code and design by @pete_b. Prefixing and polyfills generated by CSS-Crush
