_flex.scss

// Flex mixins
// --------------------------------------------------
// Flexbox display
@mixin flex-display($display: flex) {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-#{$display}box;
  display: -webkit-#{$display};
  display: -ms-#{$display};
  display: $display;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse

@mixin flex-direction($direction: row) {
  @if ($direction == row) {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
  } @else if ($direction == row-reverse) {
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
  } @else if ($direction == column) {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
  } @else if ($direction == column-reverse) {
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
  }
}

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

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($direction: row, $wrap: nowrap) {
  @include flex-direction($direction);
  @include flex-wrap($wrap);
}

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

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
@mixin align-items($align) {
  @if ($align == flex-start) {
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: $align;
    -ms-flex-align: start;
    align-items: $align;
  } @else if ($align == flex-end) {
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: $align;
    -ms-flex-align: end;
    align-items: $align;
  } @else { // baseline, center, and stretch are all the same
    -webkit-box-align: $align;
    -moz-box-align: $align;
    -webkit-align-items: $align;
    -ms-flex-align: $align;
    align-items: $align;
  }
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($align) {
  @if ($align: flex-start) {
    -webkit-align-content: $align;
    -ms-flex-line-pack: start;
    align-content: $align;
  } @else if ($align == flex-end) {
    -webkit-align-content: $align;
    -ms-flex-line-pack: end;
    align-content: $align;
  } @else if ($align == space-between) {
    -webkit-align-content: $align;
    -ms-flex-line-pack: justify;
    align-content: $align;
  } @else if ($align == space-around) {
    -webkit-align-content: $align;
    -ms-flex-line-pack: distribute;
    align-content: $align;
  } @else { // center and stretch are the same
    -webkit-align-content: $align;
    -ms-flex-line-pack: $align;
    align-content: $align;
  }
}

// Flex Item mixins
// --------------------------------------------------

// Display Order
// - applies to: flex items
// <integer>
@mixin flex-order($order: 0) {
  -webkit-box-ordinal-group: $order + 1;
  -moz-box-ordinal-group: $order + 1;
  -ms-flex-order: $order;
  -webkit-order: $order;
  order: $order;
}

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

// --------------------------------------------------
// NOTE: there's not great support for flex-shrink or flex-basis in older browsers. If possible, use flex() instead.
// Additionally, older browsers may require use of a declared width on the flex item.
// --------------------------------------------------

// Flex shrink factor
// - applies to: flex items
// <number>
@mixin 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 item
// <width>
@mixin flex-basis($width: auto) {
  -webkit-flex-basis: $width;
  -moz-flex-basis: $width;
  -ms-flex-basis: $width;
  flex-basis: $width;
}

// Flex
// - combination of flex-grow, flex-shrink, and flex-basis
// <flex-grow: number> <flex-shrink: number> <flex-basis: width>
@mixin flex($grow: 0, $shrink: 1, $width: auto) {
  -webkit-box-flex: $grow;
  -moz-box-flex: $grow;
  -webkit-flex: $grow $shrink $width;
  -ms-flex: $grow $shrink $width;
  flex: $grow $shrink $width;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($align) {
  @if ($align == flex-start) {
    -ms-flex-item-align: start;
    -webkit-align-self: $align;
    align-self: $align;
  } @else if ($align == flex-end) {
    -ms-flex-item-align: end;
    -webkit-align-self: $align;
    align-self: $align;
  } @else {
    -ms-flex-item-align: $align;
    -webkit-align-self: $align;
    align-self: $align;
  }
}