flexbox.scss

@import "compass/css3/box";
@mixin box-wrap($value: nowrap) {
  // No Webkit Box fallback.
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  @if $value == nowrap {
          -ms-flex-wrap: none;
  } @else { 
          -ms-flex-wrap: $value; 
  }
  flex-wrap: $value;
}

@mixin justify-content($value: flex-start) {
  @if $value == flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  } @else {
    -webkit-box-pack: $value;
    -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  justify-content: $value;
}

/*
  usage:
  include inside the parent flex container div like this:
  @include simpleFlex(center, 'selector')
*/
@mixin simpleFlex ($align, $child) {
  @include display-box;
  @include box-align($align);
  
  #{$child} {
    @include box-flex(1);
  }
}

/*
  Basic use of Flex to center items in a container

  example:
  @include: flex-conainer(row,nowrap,center,center);

  $dir = direction the content is flowed
         flex-direction: row | row-reverse | column | column-reverse
  
  $wrap = to wrap content onto a new line or not
          flex-wrap: nowrap | wrap | wrap-reverse

  $align = to center verticaly on Y axis
           align-items: flex-start | flex-end | center | baseline | stretch
  
  $justify = to center horizontally on X axis, default is "flex-start"
             justify-content: flex-start | flex-end | center | space-between | space-around
*/

@mixin flex-container ($dir: row, $wrap: nowrap, $align: flex-start, $justify: flex-start) {
  @include display-box;
  @include box-direction($dir);
  @include box-wrap($wrap);

  @include box-align($align);
  @include justify-content($justify);
}