Supporting

You can already use flexboxes!

Flexbox in modern browsers

As you can see, according to CanIUse.com statistics, flexboxes are well supported by all modern browsers, and they can be safely used in production.

Totall flexbox support

Known issues

  • Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. Fixed in all versions > 10.

  • IE 11 requires a unit to be added to the third argument, the flex-basis property.

  • In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed children's sizes if the container has min-height but no explicit height property.

  • In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

  • In Safari, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. The bug also appeared in Chrome but was fixed in Chrome 51

  • IE 11 does not vertically align items correctly when min-height is used.

  • Firefox 51 and below does not support Flexbox in button elements. Fixed in version 52.

More detailed information about support for flexboxes in different versions of browsers can be found on the Caniuse.com.