Flexbox cross browser

Fri, 16 Aug 2013 00:00:00 +0000

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 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/

Css3 on PHP Boy Scout

Flexbox cross browser