The following table is a reference of browser support for the CSS Flexible Box Layout Module, aka Flexbox, created by someone who is impatient to wait to use it. Each row specifies a browser with version(s) number(s), if that browser supports the 2009, 2011, or the Current syntax, what browser prefixes are required, the supported flexible box values for the display attribute, and a list of related supported attributes. I hope this is of use to you and please take some time to read the credits and at the bottom. If you see any errors or missing information below please inform me and I will make the corrections as soon as possible.
To help please contact me at . I'm especially in need of people with a large collection of browsers and devices. Any other help with testing is of course welcomed.
Last Update: 03/13/2013| Browser | 2009 Syntax Support | 2011 Syntax Support | Current Syntax Support | Prefix | Display Value | Attributes Supported |
|---|---|---|---|---|---|---|
| ie9 and Below | No | No | No | N/A | N/A | N/A |
| ie10 | No | Yes | No | -ms- | -ms-flexbox, -ms-inline-flexbox | -ms-flex, -ms-flex-align, -ms-flex-direction, -ms-flex-flow, -ms-flex-pack, -ms-flex-item-align, -ms-flex-line-pack, -ms-flex-order, -ms-flex-pack, -ms-flex-wrap |
| Firefox 2+ | Yes | No | No | -moz- | -moz-box | -moz-box-pack, -moz-box-align, -moz-box-direction, -moz-box-flex, -moz-box-ordinal-group, -moz-box-orient |
| Chrome 14 - 16 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Chrome 17 - 20 | Yes | Yes | No | -webkit- | 2009: -webkit-box 2011: -webkit-flexbox, -webkit-inline-flexbox |
2009: -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient 2011: -webkit-flex-order, -webkit-flex-pack, -webkit-flex-line-pack, -webkit-flex-align, -webkit-flex-item-align |
| Chrome 21 - 25 | Yes | No | Yes | -webkit- | 2009: -webkit-box Current: -webkit-flex, -webkit-inline-flex |
2009: -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient Current: -webkit-flex-direction, -webkit-flex-wrap, -webkit-flex-flow, -webkit-order, -webkit-flex-grow, -webkit-flex-shrink, -webkit-flex-basis, -webkit-flex, -webkit-justify-content, -webkit-align-content, -webkit-align-items, -webkit-align-self |
| Safari 4 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Safari 5 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Safari 6 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Opera 11 and below | No | No | No | N/A | N/A | N/A |
| Opera 12 | No | No | No | N/A | N/A | N/A |
| Opera 12.13 | No | No | Yes | flex, inline-flex | flex-direction, flex-wrap, flex-flow, order, flex-grow, flex-shrink, flex-basis, flex, justify-content, align-content, align-items, align-self | |
| iOS Safari 3 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| iOS Safari 4 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| iOS Safari 5 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| iOS Safari 6 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Opera Mini | No | No | No | N/A | N/A | N/A |
| Android Browser 2 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Android Browser 3 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Android Browser 4 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Blackberry 7 | Yes | No | No | -webkit- | -webkit-box | -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-orient |
| Blackberry 10 | ? | ? | Yes | -webkit- | -webkit-flex, -webkit-inline-flex | -webkit-flex-direction, -webkit-flex-wrap, -webkit-flex-flow, -webkit-order, -webkit-flex-grow, -webkit-flex-shrink, -webkit-flex-basis, -webkit-flex, -webkit-justify-content, -webkit-align-content, -webkit-align-items, -webkit-align-self |
The project began as a wish to expand the research already began by caniuse.com. Also, a big thanks to Chris Coyier for his explanation of the difference between the three versions of flexbox; I would also check out his tutorial on how to get the best browser support with flexbox.
Research is ongoing. Next step is to run additional tests to double varify everything, to test on more browsers, and then to look into specific considerations for each attribute in each browser. This last goal will result in many smaller tables.
Lastly, testing on older browsers was accomplished thanks to the joy which is Browser Stack, which amazingly supports most currently used browsers. They are awesome.