CSS Flexible Box Layout. Mixin for Sass.

_flex-align-items.scss

@mixin flex-align-items($align-items:stretch){
	$align-items-old:stretch;
	$align-items-middle:stretch;

	@if ($align-items == flex-start){
		$align-items-old:start;
		$align-items-middle:start;
	} @else if ($align-items == flex-end){
		$align-items-old:end;
		$align-items-middle:end;
	} @else if ($align-items == center){
		$align-items-old:center;
		$align-items-middle:center;
	} @else if ($align-items == baseline){
		$align-items-old:baseline;
		$align-items-middle:baseline;
	} @else {
		$align-items-old:stretch;
		$align-items-middle:stretch;
		$align-items:stretch;
	}

	-webkit-box-align:$align-items-old;
	-moz-box-align:$align-items-old;
	box-align:$align-items-old;

	-ms-flex-align:$align-items-middle;

	-webkit-align-items:$align-items;
	-moz-align-items:$align-items;
	-ms-align-items:$align-items;
	align-items:$align-items;
}

_flex-direction.scss

@mixin flex-direction($direction:row){
	$direction-old:horizontal;

	@if ($direction == column){
		$direction-old:vertical;
	} @else {
		$direction-old:horizontal;
		$direction:row;
	}

	-webkit-box-orient:$direction-old;
	-moz-box-orient:$direction-old;
	box-orient:$direction-old;

	-webkit-flex-direction:$direction;
	-moz-flex-direction:$direction;
	-ms-flex-direction:$direction;
	flex-direction:$direction;
}

_flex-display.scss

@mixin flex-display($display:flex){
	$display-old:flex;
	$display-middle:flex;

	@if ($display == inline-flex){
		$display-old:inline-box;
		$display-middle:inline-flexbox;
	} @else {
		$display-old:box;
		$display-middle:flexbox;
		$display:flex;
	}

	display:unquote("-webkit-" + $display-old);
	display:unquote("-moz-" + $display-old);
	display:$display-old;

	display:unquote("-ms-" + $display-middle);

	display:unquote("-webkit-" + $display);
	display:unquote("-moz-" + $display);
	display:unquote("-ms-" + $display);
	display:$display;
}

_flex-justify-content.scss

@mixin flex-justify-content($justify-content:flex-start){
	$justify-content-old:start;
	$justify-content-middle:start;

	@if ($justify-content == flex-end){
		$justify-content-old:end;
		$justify-content-middle:end;
	} @else if ($justify-content == center){
		$justify-content-old:center;
		$justify-content-middle:center;
	} @else if ($justify-content == space-between){
		$justify-content-old:justify;
		$justify-content-middle:justify;
	} @else {
		$justify-content-old:start;
		$justify-content-middle:start;
	}

	-webkit-box-pack:$justify-content-old;
	-moz-box-pack:$justify-content-old;
	box-pack:$justify-content-old;

	-ms-flex-pack:$justify-content-middle;

	-webkit-justify-content:$justify-content;
	-moz-justify-content:$justify-content;
	-ms-justify-content:$justify-content;
	justify-content:$justify-content;
}

_flex-wrap.scss

@mixin box-wrap($wrap:nowrap){
	// only single-line flexboxes working correctly now ((
	//@if $wrap == nowrap {
		-webkit-box-lines:single;
		-moz-box-lines:single;
		-ms-box-lines:single;
		box-lines:single;

	/*} @else {
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-ms-box-lines:multiple;
		box-lines:multiple;
	}*/

	/*-webkit-flex-wrap:$wrap;
	-moz-flex-wrap:$wrap;
	-ms-flex-wrap:$wrap;
	flex-wrap:$wrap;*/

	-webkit-flex-wrap:nowrap;
	-moz-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
}

_flex.all.scss

@import "flex-direction";
@import "flex-justify-content";
@import "flex-align-items";
@import "flex-wrap";
@import "flex-display";
@import "order";
@import "flex";

@mixin flex-container(
	$display:flex,
	$direction:row,
	$justify-content:flex-start,
	$align-items:stretch
){
	@include flex-display($display);
	@include flex-direction($direction);
	@include flex-justify-content($justify-content);
	@include flex-align-items($align-items);
}

@mixin flex-item(
	$flex:0,
	$order:1
){
	@include flex($flex);
	@include order($order);
}

_flex.scss

@mixin flex($flex:0){
	-webkit-box-flex:$flex;
	-moz-box-flex:$flex;
	box-flex:$flex;

	//-ms-flex:$flex $flex auto;

	-webkit-flex:$flex $flex auto;
	-moz-flex:$flex $flex auto;
	-ms-flex:$flex $flex auto;
	flex:$flex $flex auto;
}

_order.scss

@mixin order($order:1){
	$order:$order + 10;

	-webkit-box-ordinal-group:$order;
	-moz-box-ordinal-group:$order;
	box-ordinal-group:$order;

	-ms-flex-order:$order;

	-webkit-order:$order;
	-moz-order:$order;
	-ms-order:$order;
	order:$order;
}