Flexible Box Layout Module
Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with flex
as well as display: flex
, display: inline-flex
, align-content
, align-items
, align-self
, justify-content
and order
.
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Chrome for Android | Firefox for Android | IE Mobile | UC Browser for Android | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
49 | |||||||||||||||||
56 | 9.3 | 4.4 | |||||||||||||||
14 | 52 | 57 | 10 | 10.0-10.2 | 4.4.3-4.4.4 | 4 | |||||||||||
11
See notes:
|
15 | 53 | 58 | 10.1 | 44 | 10.3 | all | 56 | 10 | 37 | 57 | 52 | 11 | 11.4webkit
See notes:
|
5 | 1.2 | 7.12 |
54 | 59 | TP | 45 | ||||||||||||||
55 | 60 | 46 | |||||||||||||||
56 | 61 |
Notes
Most partial support refers to supporting an older version of the specification or an older syntax.
-
1
Only supports the old flexbox specification and does not support wrapping.
-
2
Only supports the 2012 syntax
-
3
Does not support flex-wrap, flex-flow or align-content properties
-
4
Partial support is due to large amount of bugs present (see known issues)
Links
Flexbox CSS generator
Article on using the latest spec
Tutorial on cross-browser support
Examples on how to solve common layout problems with flexbox
A Complete Guide to Flexbox
Flexbox playground and code generator
Flexbugs: Repo for flexbox bugs
10up Open Sources IE 8 and 9 Support for Flexbox
Ecligrid - Mobile first flexbox grid system
The Difference Between Width and Flex-Basis