Define behavior for flexbox containers and items.

Flexbox

// Parameters:
// ```scss
// $layout        : establish main-axis, either horizontal or vertical.
// $nowrap        : flex items will try to fit onto one line. Optional
// $alignment     : define alignment along the main and cross axis. Defaults to default
// $align-content : align lines in flex container when there is extra space. Optional
//
// $flex          : shorthand for flex-grow, flex-shrink and flex-basis. Defaults to auto
// $order         : order flex-items. Optional
// $align-self    : override default alignment of individual flex items. Optional
// ```
// 
// Usage:
// ```scss
// .example {
//   @include flexbox($layout: horizontal, $alignment: space-between stretch);
//   
//   .test-child {
//     @include flexbox-child($flex: 0 0 auto, $align-self: flex-end);
//   }
// }
//   
// .example-2 {
//   @include flexbox($layout: horizontal, $alignment: center, $nowrap: true);
// }
// ```
//
// **Requires** : _layoutProperties
//
// Styleguide 2.13

// TODO: remove

@mixin flexbox($layout, $nowrap: null, $alignment: default, $align-content: null) {
  @extend %do-flex;
  
  @if $layout == horizontal and $nowrap != null {
    flex-flow: row nowrap;
  } @else if $layout == horizontal and $nowrap == null {
    flex-flow: row wrap;
  } @else if $layout == vertical and $nowrap != null {
    flex-flow: column nowrap;
  } @else if $layout == vertical and $nowrap == null {
    flex-flow: column wrap;
  } @else {
    @warn 'Flexbox layout is required.';
  }

  @if $alignment != default {
    @if length($alignment) > 1 {
      $justify: nth($alignment, 1);
      $align: nth($alignment, 2);

      justify-content: $justify;
      align-items: $align;
    } @else if $alignment == center {
      justify-content: center;
      align-items: center;
    } @else if $alignment == end {
      justify-content: flex-end;
      align-items: flex-end;
    } @else if $alignment == start {
      justify-content: flex-start;
      align-items: flex-start;
    } @else {
      @warn '`#{$alignment}` is not a valid option. Properties omitted.';
    }
  } @else {
    justify-content: flex-start;
    align-items: stretch;
  }

  @if $align-content != null {
    align-content: $align-content;
  }
}

@mixin flexbox-child($flex: auto, $order: null, $align-self: null) {
  @if $flex == auto or $flex == none {
    flex: $flex;
  } @else if length($flex) > 1 and length($flex) < 4 {
    flex: $flex;
  } @else {
    @warn 'Values are out of bounds. Properties omitted.';
  }
  
  @if $order != null {
    order: $order;
  }
  
  @if $align-self != null {
    align-self: $align-self;
  }
}