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/