SCSS Flexbox Mixins for Flex items and Flex containers

_flexbox-mixins.scss

// Combines some of the common flex item attributes to simplify usage.
@mixin flex-item($order: false , $flexgrow: 0 , $flexshrink: 1, $flexbasis: auto, $alignself: false) {
  //values:
  //  $order: <integer>
  //  $flexgrow: <number> (default 0)
  //  $flexshrink: <number> (default 1)
  //  $flexbasis: <length> | auto (default auto)
  //  $alignself: auto | flex-start | flex-end | center | baseline | stretch

  // We use long hand so as not to confuse IE.
  flex-grow: $flexgrow;
  flex-shrink: $flexshrink;
  flex-basis: $flexbasis;

  @if $order {
    order: $order;
  }
  @if $alignself {
    align-self: $alignself;
  }
}

// Combines some of the common flex container attributes to simplify usage.
@mixin flex-container($display: flex, $flexdirection: false, $flexwrap: false, $justifycontent: false, $alignitems: false, $aligncontent: false) {
  //values:
  //  $display: flex | inline-flex
  //  $flexdirection: row(default) | row-reverse | column | column-reverse
  //  $flexwrap: nowrap(default) | wrap | wrap-reverse
  //  $justifycontent: flex-start(default) | flex-end | center | space-between | space-around
  //  $alignitems: flex-start | flex-end | center | baseline | stretch (default)
  //  $aligncontent: flex-start | flex-end | center | space-between | space-around | stretch (default)

  display: $display;

  @if $flexdirection {
    flex-direction: $flexdirection;
  }
  @if $flexwrap {
    flex-wrap: $flexwrap;
  }
  @if $justifycontent {
    justify-content: $justifycontent;
  }
  @if $alignitems {
    align-items: $alignitems;
  }
  @if $aligncontent {
    align-content: $aligncontent;
  }
  // Make sure the child element(s) have flex defined.
  > * {
    @include flex-item(); // Use defaults.
  }
}