After reading a css-tricks article on combining the old and new flexbox syntax, I thought it'd be cool to convert it into a bunch of scss mixins for easy use with SASS. Read the original article at - http://css-tricks.com/using-flexbox/

flexbox.scss

// Flexbox Mixins (Old & New Syntax)
// Based on the article by Chris Coyier - http://css-tricks.com/using-flexbox/

// Flexbox Context
// Description: Make the container for our columns a flexbox display context.
// By doing this, all direct children of this element become flex items. 
// Doesn't matter what they were before, they are flex items now.
// Example @include flexContext;
@mixin flexContext {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

// Flexbox Columns
// Description: Control column widths
// Example: @include flexColWidth(1);
@mixin flexColWidth($num: 1){
  -webkit-box-flex: $num;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: $num;         /* OLD - Firefox 19- */
  width: 20%;                  /* For old syntax, otherwise collapses. */
  -webkit-flex: $num;          /* Chrome */
  -ms-flex: $num;              /* IE 10 */
  flex: $num;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

// Flexbox Ordinal Group
// Description: Visually re-order html content (html source remains unchanged)
// Example: @include flexOrder(1);
@mixin flexOrder($num: 1){
  -webkit-box-ordinal-group: $num;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: $num;      /* OLD - Firefox 19- */
  -ms-flex-order: $num;              /* TWEENER - IE 10 */
  -webkit-order: $num;               /* NEW - Chrome */
  order: $num;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}