CSS Flexible Box Layout Module
- CRMethod of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with flex
, as well as display: flex
, display: inline-flex
, align-content
, align-items
, align-self
, justify-content
and order
.
Chrome
- 4 - 20: Partial support
- 21 - 28: Supported
- 29 - 112: Supported
- 113: Supported
- 114 - 116: Supported
Edge
- 12 - 112: Supported
- 113: Supported
Safari
- 3.1 - 6: Partial support
- 6.1 - 8: Supported
- 9 - 16.4: Supported
- 16.5: Supported
- 16.6 - TP: Supported
Firefox
- 2 - 21: Partial support
- 22 - 27: Partial support
- 28 - 112: Supported
- 113: Supported
- 114 - 115: Supported
Opera
- 9 - 12: Not supported
- 12.1: Supported
- 15 - 16: Supported
- 17 - 98: Supported
- 99: Supported
IE
- 5.5 - 9: Not supported
- 10: Partial support
- 11: Partial support
Chrome for Android
- 113: Supported
Safari on iOS
- 3.2 - 6.1: Partial support
- 7 - 8.4: Supported
- 9 - 16.4: Supported
- 16.5: Supported
Samsung Internet
- 4 - 20: Supported
- 21: Supported
Opera Mini
- all: Supported
Opera Mobile
- 10 - 12: Not supported
- 12.1: Supported
- 73: Supported
UC Browser for Android
- 13.4: Supported
Android Browser
- 2.1 - 4.3: Partial support
- 4.4 - 4.4.4: Supported
- 113: Supported
Firefox for Android
- 113: Supported
QQ Browser
- 13.1: Supported
Baidu Browser
- 13.18: Supported
KaiOS Browser
- 2.5: Supported
- 3: Supported
Most partial support refers to supporting an older version of the specification or an older syntax.
- Resources:
- Flexbox CSS generator
- A Complete Guide to Flexbox
- Tutorial on cross-browser support
- 10up Open Sources IE 8 and 9 Support for Flexbox
- Flexbugs: Repo for flexbox bugs
- Ecligrid - Mobile first flexbox grid system
- The Difference Between Width and Flex-Basis
- Examples on how to solve common layout problems with flexbox
- Flexbox playground and code generator
- Article on using the latest spec
- Sub-features:
- gap property for Flexbox