// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
// flex or inline-flex
.flex-display() {
    display: ~"-webkit-box";
    display: ~"-webkit-flex";
    display: ~"-moz-flex";
    display: ~"-ms-flexbox"; // IE10 uses -ms-flexbox
    display: ~"-ms-flex"; // IE11
    display: flex;
}

// The 'flex: 0 0 auto' shorthand
.flex-fix() {
  -webkit-box-flex: 0;
      -webkit-flex: 0 0 auto;
         -moz-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
}

// The 'flex: 1 1 auto' shorthand
.flex-stretch() {
  -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
         -moz-flex: 1 1 auto;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
}

// The 'flex: 1' shorthand
.flex-stretch-constrain() {
  -webkit-box-flex: 1;
      -webkit-flex: 1;
         -moz-flex: 1;
          -ms-flex: 1;
              flex: 1;
}

// Flex Flow Direction Column
// - applies to: flex containers
.flex-direction-column() {
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -webkit-box-orient: vertical;
      -ms-flex-direction: column;
          flex-direction: column;
}

// Flex Flow Direction Row
// - applies to: flex containers
.flex-direction-row() {
  -webkit-flex-direction: row;
     -moz-flex-direction: row;
      -webkit-box-orient: horizontal;
      -ms-flex-direction: row;
          flex-direction: row;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
     -moz-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
          flex-wrap: @wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
     -moz-flex-flow: @flow;
      -ms-flex-flow: @flow;
          flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
     -moz-order: @order;
      -ms-order: @order;
          order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
     -moz-flex-grow: @grow;
      -ms-flex-grow: @grow;
          flex-grow: @grow;
}

// Flex shr
// - applies to: flex itemsink factor
// <number> 
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
     -moz-flex-shrink: @shrink;
      -ms-flex-shrink: @shrink;
          flex-shrink: @shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width> 
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
     -moz-flex-basis: @width;
      -ms-flex-basis: @width;
          flex-basis: @width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around 
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
     -moz-justify-content: @justify;
      -ms-justify-content: ;
         -webkit-box-pack: @justify;
          justify-content: @justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch 
.align-content(@align: stretch) {
  -webkit-align-content: @align;
     -moz-align-content: @align;
      -webkit-box-align: @align;
      -ms-align-content: @align;
          align-content: @align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch 
.align-items(@align: stretch) {
  -webkit-align-items: @align;
     -moz-align-items: @align;
      -ms-align-items: @align;
          align-items: @align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch 
.align-self(@align: auto) {
  -webkit-align-self: @align;
     -moz-align-self: @align;
      -ms-align-self: @align;
          align-self: @align;
}