Browser support is not bad. At the time of this writing, the level of support was 92–95% when using reasonable fallbacks for older browsers, so there is no reason not to use flexbox right away.
A well-configured Autoprefixer, which we mentioned at the beginning of this e-book, will definitely guarantee full modern browser compatibility. So read on if you are into details.
There are three types of flexbox syntax in modern browsers.
- New syntax:
display: flexand other properties shown in this e-book. This is supported by the latest versions of all browsers, including IE11 and Opera Mini.
- Tweener syntax from 2012:
display: flexbox. Nowdays required just by IE10.
- Legacy syntax from 2009: Wherever you see
-webkit-display: box. Webkit prior to version 20, i.e. iOS6 or older Androids.
It applies to IE9 and older. Just take a look at your project stats to see how many visitors use these older browsers and address the issue accordingly:
Zero fallback – i.e., We Do Not Care About Support
It is good to realize and test in practice what it truly means “not to bother with flex box support in older browsers”.
You can see this in the following picture where the form makes use of flexbox. In Safari, the form is displayed as planned. In IE8, the text input will not fill the whole area and the “Other” caption will not grow in size as font size increases: