Using flexbox for centered floaty layouts

flexing.scss

/* 

Notes:
- Using bourbon.io
- Currently only supported down to IE10 :(
- This was helpful <http://jonibologna.com/flexbox-cheatsheet/>
- Bourbon flex docs <http://bourbon.io/docs/#flexbox>

*/

.flex--container {
  @include display(flex);
  @include flex-direction(row);
  @include justify-content(space-around);
  @include align-items(center);
  .flex--child {
    @include flex(1);
  }
  .flex--teen {
    @include flex(3)
  }
}

/*

Example markup:
---------------------------------

<div class="flex--container">
  <div class="flex--child">
    :)
  </div>
  <div class="flex--teex">
    ;)
  </div>
  <div class="flex--child">
    :o
  </div>
</div>

Example layout:
------------------------------------
        |                  |        
  :)    |        ;)        |    :o   
        |                  |        
------------------------------------

*/