Despite having been around for a while and having been through a couple of revisions, its support across browsers can vary greatly. From “Candidate Recommendation” on Chrome/Opera, “legacy flexbox” on Firefox and no support at all on IE9 and earlier.
Making flexbox work consistently across browsers was a challenge for us on a recent project, but I have found a solution that seems to work quite well.
Below is an SCSS @mixin that will attempt to handle compatibility between CR and legacy cross browsers flexbox.
@mixin flex($content: flex-start, $items: stretch, $direction: row, $wrap: wrap) {
$packLegacy: $content;
@if $packLegacy == flex-start {
$packLegacy: start;
} @else if $packLegacy == flex-end {
$packLegacy: end;
}
$alignLegacy: $items;
@if $alignLegacy ==flex-start {
$alignLegacy: start;
} @else if $alignLegacy == flex-end {
$alignLegacy: end;
}
$oritentLegacy: $direction;
$directionLegacy: normal;
@if $oritentLegacy == row {
$oritentLegacy: horizontal;
} @else if $oritentLegacy == column {
$oritentLegacy: vertical;
}
/** SAFARI **/
display: -webkit-box;
-webkit-box-orient: $oritentLegacy;
-webkit-box-pack: $packLegacy;
-webkit-box-align: $alignLegacy;
/** FIREFOX LEGACY **/
display: -moz-box;
-moz-box-orient: $oritentLegacy;
-moz-box-direction: $directionLegacy;
-moz-box-pack: $packLegacy;
-moz-box-align: $alignLegacy;
/** LEGACY **/
display: box;
box-orient: $oritentLegacy;
box-direction: $directionLegacy;
box-pack: $packLegacy;
box-align: $alignLegacy;
/** IE 10+ **/
display: -ms-flexbox;
-ms-flex-wrap: $wrap;
-ms-flex-direction: $direction;
-ms-justify-content: $content;
-ms-align-items: $items;
/** CHROME **/
display: -webkit-flex;
-webkit-flex-wrap: $wrap;
-webkit-flex-direction: $direction;
-webkit-justify-content: $content;
-webkit-align-items: $items;
/** NATIVE **/
display: flex;
flex-wrap: $wrap;
flex-direction: $direction;
justify-content: $content;
align-items: $items;
} //@mixin flex
@mixin flexItem($width) {
-webkit-box-flex: $width;
-moz-box-flex: $width;
box-flex: $width;
-ms-flex: $width;
-webkit-flex: $width;
flex: $width;
min-height: 0;
}
Firefox however only half supports flexbox (all revisions) and to get around this I would recommend using Modernizr as this will add the class “no-flexbox” to the <html> tag. This provides us with a simple work around that allows non flexbox supporting browsers render correctly by using specifically crafted and targeted CSS for non-flexbox browsers
I found that IE9 support could be implemented using the flexie javascript plugin. In IE8 Modernizr will add the class “no-flexboxlegacy” which can again allow you to create targeted CSS that wont affect your Flexbox layout.
For a great overview of the “CR” of flexbox, CSS Tricks has an amazingly comprehensive coverage of the functionality here http://css-tricks.com/snippets/css/a-guide-to-flexbox/