Cacher is the code snippet organizer for pro developers

///////////////////////////
//
// Flexbox
//
// flex_container() direction is required.
//
// Possible values:
//  - vertical
//  - horizontal
//
///////////////////////////

@mixin flex_container($direction) {
  @include vendor_prefix(
    box-orient,
    $direction
  );

  // Translate the new syntax into the old syntax for IE
  @if $direction == vertical {
    @include vendor_prefix(
      flex-direction,
      column
    );
  } @else {
    @include vendor_prefix(
      flex-direction,
      row
    );
  }

  // scss-lint:disable DuplicateProperty
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
  // scss-lint:enable DuplicateProperty
}

@mixin flex_component($values: 1) {
  // scss-lint:disable VendorPrefix
  -webkit-box-flex : $values;
  -webkit-flex     : $values;
  -moz-box-flex    : $values;
  -ms-flex         : $values;
  flex             : $values;
  // scss-lint:enable VendorPrefix
}

@mixin flex_align($position: center) {
  // scss-lint:disable VendorPrefix
  -webkit-box-align   : $position;
  -webkit-align-items : $position;
  -moz-box-align      : $position;
  -ms-flex_align      : $position;
  align-items         : $position;
  // scss-lint:enable VendorPrefix
}

@mixin flex_pack($position: center) {
  // scss-lint:disable VendorPrefix
  -webkit-box-pack        : $position;
  -webkit-justify-content : $position;
  -moz-box-pack           : $position;
  -ms-flex_pack           : $position;
  // scss-lint:enable VendorPrefix
}