Compass CSS Flexible Box Layout Module Mixin

//-----------------------------------------------
//CSS Flexible Box Layout Module Mixin
//W3C Candidate Recommendation, 18 September 2012
//http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
//-----------------------------------------------


//Flex Containers: the ‘flex’ and ‘inline-flex’ ‘display’ values
$default-flex-display: flex;


//Flex Flow Direction: the ‘flex-direction’ property default value
//row | row-reverse | column | column-reverse
$default-flex-direction: row;

//Flex Line Wrapping: the ‘flex-wrap’ property default value
//nowrap | wrap | wrap-reverse
$default-flex-wrap: nowrap;

//Flex Direction and Wrap: the ‘flex-flow’ shorthand default value
//<‘flex-direction’> || <‘flex-wrap’>
$default-flex-flow: $default-flex-direction $default-flex-wrap;

//Display Order: the ‘order’ property default value
//<integer>
$default-flex-order: 0;

//The ‘flex-grow’ property default value
//<number>
$default-flex-grow: 0;

//The ‘flex-shrink’ property default value
//<number>
$default-flex-shrink: 1;

//The ‘flex-basis’ property default value
//<'width'>
$default-flex-basis: auto;

//Axis Alignment: the ‘justify-content’ property
//flex-start | flex-end | center | space-between | space-around
$default-justify-content: flex-start;

//Cross-axis Alignment: the ‘align-items’ and ‘align-self’ properties
//flex-start | flex-end | center | baseline | stretch
$default-align-items: stretch;

//auto | flex-start | flex-end | center | baseline | stretch
$default-align-self: auto;

// Packing Flex Lines: the ‘align-content’ property
//flex-start | flex-end | center | space-between | space-around | stretch
$default-align-content: stretch;

//Flex Containers
@mixin display-flex($flex: $default-flex-display) {
  $flex: unquote($flex);
  @include experimental-value(display, $flex, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

//Flex Flow Direction
@mixin flex-direction($flexdirection: $default-flex-direction) {
  $flexdirection: unquote($flexdirection);
  @include experimental(flex-direction, $flexdirection, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

//Flex Line Wrapping
@mixin flex-wrap($flexwrap: $default-flex-wrap) {
  $flexwrap: unquote($flexwrap);
  @include experimental(flex-wrap, $flexwrap, not -moz, -webkit, not -o, not -ms, not -khtml, official);

}

//Flex Direction and Wrap
@mixin flex-flow($flexflow: $default-flex-flow) {
  $flexflow: unquote($flexflow);
  @include experimental(flex-flow, $flexflow, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}


//Display Order
@mixin order($order: $default-flex-order) {
  $order: unquote($order);
  @include experimental(order, $order, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

//Axis Alignment
@mixin justify-content($justifycontent) {
  $justifycontent: unquote($justifycontent);
  @include experimental(justify-content, $justifycontent, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

//Cross-axis Alignment
@mixin align-items($alignitems) {
  $alignitems: unquote($alignitems);
  @include experimental(align-items, $alignitems, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

@mixin align-self($alignself) {
  $alignself: unquote($alignself);
  @include experimental(align-self, $alignself, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

// Packing Flex Lines
@mixin align-content($aligncontent) {
  $aligncontent: unquote($aligncontent);
  @include experimental(align-content, $aligncontent, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

//The ‘flex’ Shorthand
@mixin flex($flex:$default-flex-grow $default-flex-shrink $default-flex-basis) {
  $flex: unquote($flex);
  @include experimental(flex, $flex, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}