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.

More browser support info available on caniuse.com.

Known issues

Flexbox early 2012

Flexbox early 2012 (Internet Explorer 10)

align-content (equiv. flex-line-pack ) doesn't work if the cross axis dimension is set with min-width or min-height

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