Flex Grid Values with Bourbon Mixins

_flexbox-grid.scss

.flex-container{
  box-sizing: border-box;
  padding: .5rem;

}

.flex-row{
  box-sizing: border-box;
  @include display(flex);
  @include box-orient(horizontal);
  @include box-direction;
  @include flex-wrap($value: wrap);
  margin-right: -.5rem;
  margin-left: -.5rem;
}

.flex-col-xs,
.flex-col-xs-1,
.flex-col-xs-2,
.flex-col-xs-3,
.flex-col-xs-4,
.flex-col-xs-5,
.flex-col-xs-6,
.flex-col-xs-7,
.flex-col-xs-8,
.flex-col-xs-9,
.flex-col-xs-10,
.flex-col-xs-11,
.flex-col-xs-12,
.flex-col-xs-offset-1,
.flex-col-xs-offset-2,
.flex-col-xs-offset-3,
.flex-col-xs-offset-4,
.flex-col-xs-offset-5,
.flex-col-xs-offset-6,
.flex-col-xs-offset-7,
.flex-col-xs-offset-8,
.flex-col-xs-offset-9,
.flex-col-xs-offset-10,
.flex-col-xs-offset-11,
.flex-col-xs-offset-12 {
  box-sizing: border-box;
  @include display(flex);
  @include box-orient(vertical);
  @include flex-direction(column);
  @include flex-grow(0);
  @include flex-shrink(0);
  padding-right: .5rem;
  padding-left: .5rem;
}


.flex-col-xs {
  @include flex(1);
  @include flex-basis(0);
  max-width: 100%;
}

.flex-col-xs-1 {
  @include flex-basis(8.333333333%);
  max-width: 8.333333333%;
}

.flex-col-xs-2 {
  @include flex-basis(16.666666667%);
  max-width: 16.666666667%;

}

.flex-col-xs-3 {
  @include flex-basis(25%);
  max-width:25%;
}

.flex-col-xs-4 {
  @include flex-basis(33.333333333%);
  max-width:33.333333333%;
}

.flex-col-xs-5 {
  @include flex-basis(41.666666667%);
  max-width:41.666666667%;

}

.flex-col-xs-6 {
  @include flex-basis(50%);
  max-width:50%;
}

.flex-col-xs-7 {
  @include flex-basis(58.333333333%);
  max-width:58.333333333%;
}

.flex-col-xs-8 {
  @include flex-basis(66.666666667%);
  max-width:66.666666667%;
}

.flex-col-xs-9 {
  @include flex-basis(75%);
  max-width:75%;
}

.flex-col-xs-10 {
  @include flex-basis(83.333333333%);
  max-width:83.333333333%;
}

.flex-col-xs-11 {
  @include flex-basis(91.666666667%);
  max-width:91.666666667%;
}

.flex-col-xs-12 {
  @include flex-basis(100%);
  max-width:100%;
}

.flex-col-xs-offset-1 {
  margin-left: 8.333333333%;
}

.flex-col-xs-offset-2 {
  margin-left: 16.666666667%;
}

.flex-col-xs-offset-3 {
  margin-left: 25%;
}

.flex-col-xs-offset-4 {
  margin-left: 33.333333333%;
}

.flex-col-xs-offset-5 {
  margin-left: 41.666666667%;
}

.flex-col-xs-offset-6 {
  margin-left: 50%;
}

.flex-col-xs-offset-7 {
  margin-left: 58.333333333%;
}

.flex-col-xs-offset-8 {
  margin-left: 66.666666667%;
}

.flex-col-xs-offset-9 {
  margin-left: 75%;
}

.flex-col-xs-offset-10 {
  margin-left: 83.333333333%;
}

.flex-col-xs-offset-11 {
  margin-left: 91.666666667%;
}

@media only screen and (min-width: 48em) {
  .flex-col-sm,
  .flex-col-sm-1,
  .flex-col-sm-2,
  .flex-col-sm-3,
  .flex-col-sm-4,
  .flex-col-sm-5,
  .flex-col-sm-6,
  .flex-col-sm-7,
  .flex-col-sm-8,
  .flex-col-sm-9,
  .flex-col-sm-10,
  .flex-col-sm-11,
  .flex-col-sm-12,
  .flex-col-sm-offset-1,
  .flex-col-sm-offset-2,
  .flex-col-sm-offset-3,
  .flex-col-sm-offset-4,
  .flex-col-sm-offset-5,
  .flex-col-sm-offset-6,
  .flex-col-sm-offset-7,
  .flex-col-sm-offset-8,
  .flex-col-sm-offset-9,
  .flex-col-sm-offset-10,
  .flex-col-sm-offset-11,
  .flex-col-sm-offset-12 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;


    @include display("flex");
    @include box-orient(vertical);
    @include box-direction(column);
    @include flex(0);
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

.box,
.box-first,
.box-large,
.box-nested,
.box-row {
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 1rem;
  margin-bottom: 0;
  background: #007FFF;
  border: 1px solid #FFF;
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.box-row {
  margin-bottom: 1rem;
}

.box-first {
  background: #06C;
  border-color: #007FFF;
}

.box-nested {
  background: #036;
  border-color: #007FFF;
}

.box-large {
  height: 8rem;
}

_flexbox-mixins.scss

@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
  @include display-box;
  @include box-orient($orient);
  @include box-pack($pack);
  @include box-align($align);
}

@mixin display-box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox; // IE 10
  display: box;
}

@mixin box-orient($orient: inline-axis) {
  // horizontal|vertical|inline-axis|block-axis|inherit
  @include prefixer(box-orient, $orient, webkit moz spec);
}

@mixin box-pack($pack: start) {
  // start|end|center|justify
  @include prefixer(box-pack, $pack, webkit moz spec);
  -ms-flex-pack: $pack; // IE 10
}

@mixin box-align($align: stretch) {
  // start|end|center|baseline|stretch
  @include prefixer(box-align, $align, webkit moz spec);
  -ms-flex-align: $align; // IE 10
}

@mixin box-direction($direction: normal) {
  // normal|reverse|inherit
  @include prefixer(box-direction, $direction, webkit moz spec);
  -ms-flex-direction: $direction; // IE 10
}

@mixin box-lines($lines: single) {
  // single|multiple
  @include prefixer(box-lines, $lines, webkit moz spec);
}

@mixin box-ordinal-group($int: 1) {
  @include prefixer(box-ordinal-group, $int, webkit moz spec);
  -ms-flex-order: $int; // IE 10
}

@mixin box-flex($value: 0.0) {
  @include prefixer(box-flex, $value, webkit moz spec);
  -ms-flex: $value; // IE 10
}

@mixin box-flex-group($int: 1) {
  @include prefixer(box-flex-group, $int, webkit moz spec);
}

// CSS3 Flexible Box Model and property defaults
// Unified attributes for 2009, 2011, and 2012 flavours.

// 2009 - display (box | inline-box)
// 2011 - display (flexbox | inline-flexbox)
// 2012 - display (flex | inline-flex)
@mixin display($value) {
  //  flex | inline-flex
  @if $value == "flex" {
    // 2009
    display: -webkit-box;
    display: -moz-box;
    display: box;

    // 2012
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox; // 2011 (IE 10)
    display: flex;
  }

  @elseif $value == "inline-flex" {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-box;

    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  @else {
    display: $value;
  }
}

// 2009 - box-flex (integer)
// 2011 - flex (decimal | width decimal)
// 2012 - flex (integer integer width)
@mixin flex($value) {

  // Grab flex-grow for older browsers.
  $flex-grow: nth($value, 1);

  // 2009
  @include prefixer(box-flex, $flex-grow, webkit moz spec);

  // 2011 (IE 10), 2012
  @include prefixer(flex, $value, webkit moz ms spec);
}

// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
//      - box-direction (normal | reverse)      
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
@mixin flex-direction($value: row) {
  
    // Alt values.
    $value-2009: $value;
    $value-2011: $value;
    $direction: "normal";
  
    @if $value == row {
      $value-2009: horizontal;
    }
  
    @elseif $value == "row-reverse" {
      $value-2009: horizontal;
      $direction: reverse;
    }
  
    @elseif $value == column {
      $value-2009: vertical;
    }
  
    @elseif $value == "column-reverse" {
      $value-2009: vertical;
      $direction: reverse;
    }
  
    // 2009
    @include prefixer(box-orient, $value-2009, webkit moz spec);
    @if $direction == "reverse" {
      @include prefixer(box-direction, $direction, webkit moz spec);
    }
  
    // 2012
    @include prefixer(flex-direction, $value, webkit moz spec);
  
    // 2011 (IE 10)
    -ms-flex-direction: $value;
}

// 2009 - box-lines (single | multiple)
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
@mixin flex-wrap($value: nowrap) {

  // Alt values.
  $alt-value: $value;
  @if $value == nowrap {
    $alt-value: single;
  }

  @elseif $value == wrap {
    $alt-value: multiple;
  }

  @elseif $value == "wrap-reverse" {
    $alt-value: multiple;
  }

  @include prefixer(box-lines, $alt-value, webkit moz spec);
  @include prefixer(flex-wrap, $value, webkit moz ms spec);
}

// 2009 - TODO: parse values into flex-direction/flex-wrap
// 2011 - TODO: parse values into flex-direction/flex-wrap
// 2012 - flex-flow (flex-direction || flex-wrap)
@mixin flex-flow($value) {
  @include prefixer(flex-flow, $value, webkit moz spec);
}

// 2009 - box-ordinal-group (integer)
// 2011 - flex-order (integer)
// 2012 - order (integer)
@mixin order($int: 0) {
  // 2009
  @include prefixer(box-ordinal-group, $int, webkit moz spec);

  // 2012
  @include prefixer(order, $int, webkit moz spec);

  // 2011 (IE 10)
  -ms-flex-order: $int;
}

// 2012 - flex-grow (number)
@mixin flex-grow($number: 0) {
  @include prefixer(flex-grow, $number, webkit moz spec);
  -ms-flex-positive: $number;
}

// 2012 - flex-shrink (number)
@mixin flex-shrink($number: 1) {
  @include prefixer(flex-shrink, $number, webkit moz spec);
  -ms-flex-negative: $number;
}

// 2012 - flex-basis (number)
@mixin flex-basis($width: auto) {
  @include prefixer(flex-basis, $width, webkit moz spec);
  -ms-flex-preferred-size: $width;
}

// 2009 - box-pack (start | end | center | justify)
// 2011 - flex-pack (start | end | center | justify)
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
@mixin justify-content ($value: flex-start) {

  // Alt values.
  $alt-value: $value;
  @if $value == "flex-start" {
    $alt-value: start;
  }

  @elseif $value == "flex-end" {
    $alt-value: end;
  }

  @elseif $value == "space-between" {
    $alt-value: justify;
  }

  @elseif $value == "space-around" {
    $alt-value: center;
  }

  // 2009
  @include prefixer(box-pack, $alt-value, webkit moz spec);

  // 2012
  @include prefixer(justify-content, $value, webkit moz ms o spec);

  // 2011 (IE 10)
  -ms-flex-pack: $alt-value;
}

// 2009 - box-align (start | end | center | baseline | stretch)
// 2011 - flex-align (start | end | center | baseline | stretch)
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
@mixin align-items($value: stretch) {

  $alt-value: $value;

  @if $value == "flex-start" {
    $alt-value: start;
  }

  @elseif $value == "flex-end" {
    $alt-value: end;
  }

  // 2009
  @include prefixer(box-align, $alt-value, webkit moz spec);

  // 2012
  @include prefixer(align-items, $value, webkit moz ms o spec);

  // 2011 (IE 10)
  -ms-flex-align: $alt-value;
}

// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
@mixin align-self($value: auto) {

  $value-2011: $value;
  @if $value == "flex-start" {
    $value-2011: start;
  }

  @elseif $value == "flex-end" {
    $value-2011: end;
  }

  // 2012
  @include prefixer(align-self, $value, webkit moz spec);

  // 2011 (IE 10)
  -ms-flex-item-align: $value-2011;
}

// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
@mixin align-content($value: stretch) {

  $value-2011: $value;
  @if $value == "flex-start" {
    $value-2011: start;
  }

  @elseif $value == "flex-end" {
    $value-2011: end;
  }

  @elseif $value == "space-between" {
    $value-2011: justify;
  }

  @elseif $value == "space-around" {
    $value-2011: distribute;
  }

  // 2012
  @include prefixer(align-content, $value, webkit moz spec);

  // 2011 (IE 10)
  -ms-flex-line-pack: $value-2011;
}

_prefixer.scss

@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    }
    @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    }
    @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    }
    @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    }
    @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    }
    @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

example.html

<div class="flex-row">
  <div class="flex-col-xs-12">
    <div class="box flex-container">
      <div class="flex-row">
        <div class="flex-col-xs-9">
          <div class="box-first flex-container">
            <div class="flex-row">
              <div class="flex-col-xs-4">
                <div class="box-nested">Auto</div>
              </div>
              <div class="flex-col-xs-8">
                <div class="box-nested">
                  Auto
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-col-xs-3">
          <div class="box-first flex-container">
            <div class="flex-row">
              <div class="flex-col-xs">
                <div class="box-nested">
                  Auto
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>