Based on CSS Tricks: Using Flexbox - http://css-tricks.com/using-flexbox/ & Special Thanks to Hugo Giraudel- http://hugogiraudel.com/2013/07/15/understanding-sass-lists/ Flexbox with elegant depreciation. Works in IE10+, iOS 6-, Safari 3.1-6, Firefox 20-, Chrome, Opera 12.1 The advantage of this Mixin set is it is small and reusable. Use any cla…

flexbox-demo.html

<div class="box">
	<div class="sidebar1">
	  <strong>Create a list</strong><br>
	  one<br>
	  two<br>
	  three<br>
	</div>
	<div class="headline">
	  <h1>This code was created so that you can use whatever classes you want, in any order you want.</h1>
	</div>
	<div class="headline2"><h2>Feel free to experiment</h2></div>
	<div class="sidebar2">try it out!</div>
</div>

flexbox_include.scss

@import 'layout';

.box{
	@include flexBoxCalc();
}

FlexBox_Layout.scss

@mixin setFlexBox($flexType){
	//options are block level or inline
	@if $flexType == 'block'{
		display: -webkit-box;
		display: -moz-box;
		display: box;
		display: -ms-flexbox;
		display: flexbox;
		display: -webkit-flex;
		display: flex;
	} @else if $flexType == 'inline' {
		display: -webkit-inline-box;
		display: -moz-inline-box;
		display: inline-box;
		display: -ms-inline-flexbox;
		display: inline-flexbox;
		display: -webkit-inline-flex;
		display: inline-flex;
	} @else {
		@warn 'ERROR: setFlexBox must be "block" or "inline"';
	}
}

@mixin flexAxisAlignment($align) {
	// options are center, start, end, justify, distribute
	
	@if $align == 'start' OR $align == 'end' {
		-webkit-box-pack: $align; /* OLD -IOS 6-, Safari, Chrome<21 */
		-moz-box-pack: $align; /* OLD Firefox 3 - 21 */
		-ms-flex-pack: $align; /* IE 10 */
		-webkit-justify-content: 'flex-'+$align; /* Chrome 21 - 28 */
		justify-content: 'flex-'+$align;
	} @else if $align == 'justify' {
		-webkit-box-pack: $align; /* OLD -IOS 6-, Safari, Chrome<21 */
		-moz-box-pack: $align; /* OLD Firefox 3 - 21 */
		-ms-flex-pack: $align; /* IE 10 */
		-webkit-justify-content: 'space-between'; /* Chrome 21 - 28 */
		justify-content: 'space-between';
	} @else if $align == 'distribute' {
		/* -IOS 6-, Safari, Chrome<21 does not support distribute */
		/* Firefox 3 - 21 does not support distribute*/
		-ms-flex-pack: $align; /* IE 10 */
		-webkit-justify-content: 'space-around'; /* Chrome 21 - 28 */
		justify-content: 'space-around';
	} @else if $align == 'center' {
		-webkit-box-pack: $align; /* OLD -IOS 6-, Safari, Chrome<21 */
		-moz-box-pack: $align; /* OLD Firefox 3 - 21 */
		-ms-flex-pack: $align; /* IE 10 */
		-webkit-justify-content: $align; /* Chrome 21 - 28 */
		justify-content: $align;
	}@else {
		@warn 'ERROR: Set flexAxisAlignment to center, start, end, justify, or distribute';
	}
	
}

@mixin flexCrossAxisAlignment($align) {
	// options are start, center, end, baseline, and stretch
	@if $align == 'start' OR $align == 'end' {
		-webkit-box-align: $align; /* OLD -IOS 6-, Safari, Chrome<21 */
		-moz-box-align: $align; /* OLD Firefox 3 - 21 */
		-ms-flex-align: $align; /* IE 10 */
		-webkit-align-items: 'flex-'+$align; /* Chrome 21 - 28 */
		align-items: 'flex-'+$align;
	} @if $align == 'center' OR $align == 'baseline' OR $align == 'stretch' {
		-webkit-box-align: $align; /* OLD -IOS 6-, Safari, Chrome<21 */
		-moz-box-align: $align; /* OLD Firefox 3 - 21 */
		-ms-flex-align: $align; /* IE 10 */
		-webkit-align-items: 'flex-'+$align; /* Chrome 21 - 28 */
		align-items: 'flex-'+$align;
	} @else {
		@warn 'ERROR: Set flexCrossAxisAlignment to start, center, end, baseline, stretch';
	}
}

@mixin flexSingleCrossAxisAlignment($align) {
	// options are auto, start, center, end, baseline, and stretch
	/* -IOS 6-, Safari, Chrome<21 does not support individual cross axis alignment */
	/* Firefox 3 - 21 does not support individual cross axis alignment*/
	@if $align == 'auto' OR $align == 'center' OR $align == 'baseline' OR $align == 'stretch'{
		-ms-flex-item-align: $align; /* IE 10 */
		-webkit-align-self: $align; /* Chrome 21 - 28 */
		align-self: $align;
	} @else if $align == 'start' OR $align == 'end' {
		-ms-flex-item-align: $align; /* IE 10 */
		-webkit-align-self: 'flex-'+$align; /* Chrome 21 - 28 */
		align-self: 'flex-'+$align;
	} @else {
		@warn 'ERROR: Set flexSingleCrossAxisAlignment to auto, start, center, end, baseline, or stretch';
	}
}

@mixin flexLineAlignment($align) {
	// options are start, center, end, justify, distribute and stretch
	/* -IOS 6-, Safari, Chrome<21 does not support individual cross axis alignment */
	/* Firefox 3 - 21 does not support individual cross axis alignment*/
	@if $align == 'center'  OR $align == 'stretch'{
		-ms-flex-line-pack: $align; /* IE 10 */
		-webkit-align-content: $align; /* Chrome 21 - 28 */
		align-content: $align;
	} @else if $align == 'start' OR $align == 'end' {
		-ms-flex-line-pack: $align; /* IE 10 */
		-webkit-align-content: 'flex-'+$align; /* Chrome 21 - 28 */
		align-content:  'flex-'+$align;
	} @else if $align == 'justify'{
		-ms-flex-line-pack: $align; /* IE 10 */
		-webkit-align-content: 'space-between'; /* Chrome 21 - 28 */
		align-content:  'space-between';
	} @else if $align == 'distribute' {
		-ms-flex-line-pack: $align; /* IE 10 */
		-webkit-align-content: 'space-around'; /* Chrome 21 - 28 */
		align-content:  'space-around';
	} @else {
		@warn 'ERROR: Set flexLineAlignment to start, center, end, justify, distribute and stretch';
	}
}

@mixin flexSize ($flexNum) {
	-webkit-box-flex: $flexNum;      /* OLD - iOS 6-, Safari 3.1-6 */
  	-moz-box-flex: $flexNum;         /* OLD - Firefox 19- */
  	-webkit-flex: $flexNum;          /* Chrome */
  	-ms-flex: $flexNum;              /* IE 10 */
  	flex: $flexNum;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

@mixin flexOrder ($orderNum) {
	$orderNum: round($orderNum);
	-webkit-box-ordinal-group: $orderNum;   /* OLD - iOS 6-, Safari 3.1-6 */
  	-moz-box-ordinal-group: $orderNum;      /* OLD - Firefox 19- */
  	-ms-flex-order: $orderNum;              /* TWEENER - IE 10 */
  	-webkit-order: $orderNum;               /* NEW - Chrome */
  	order: $orderNum;  
}

@mixin flexDirection ($direction) {
	@if $direction == 'horizontal' {
		@if $set-rtl == true {
			@extend %flexLayout-horizontal-RTL;
		} @else {
			@extend %flexLayout-horizontal;
		}
	} @else if $direction == 'vertical' {
		@if $set-rtl == true {
			@extend %flexLayout-vertical-RTL;
		} @else {
			@extend %flexLayout-vertical;
		}
	} @else {
		@warn 'ERROR: flexDirection must be "horizontal" or "vertical"';
	}
}

%flexLayout-horizontal-RTL {
	box-direction: reverse;
	box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-box-orient: horizontal;
	-moz-box-direction: reverse;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

%flexLayout-vertical-RTL {
	box-direction: reverse;
	box-orient: vertical;
	-webkit-box-direction: reverse;
	-webkit-box-orient: vertical;
	-moz-box-direction: reverse;
	-moz-box-orient: vertical;
	-ms-flex-direction: column-reverse;
	-webkit-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

%flexLayout-horizontal {
	box-direction: normal;
	box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-box-direction: normal;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
}
%flexLayout-vertical {
	box-direction: normal;
	box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-moz-box-direction: normal;
	-moz-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

@mixin flexBoxCalc($boxType: 'block', $size: 1, $order: null, $axisAlign: null, $crossAxisAlign: null, $singleCrossAxis: null, $lineAlignment: null, $direction: null) {
	@if $boxType != null {
		@include setFlexBox($boxType);
	}
	@if $size != null {
		@include flexSize($size);
	}
	@if $order != null {
		@include flexOrder($order);
	}
	@if $axisAlign != null {
		@include flexAxisAlignment($axisAlign);
	}
	@if $crossAxisAlign != null{
		@include flexCrossAxisAlignment($crossAxisAlign);
	}
	@if $singleCrossAxis != null{
		@include flexSingleCrossAxisAlignment($singleCrossAxis);
	} 
	@if $lineAlignment != null {
		@include flexLineAlignment($lineAlignment);
	}
	@if $direction != null {
		@include flexDirection($direction);
	}
}