Snippets flexbox

_scss/utilities/_flexbox.scss

@@ -22,18 +22,25 @@
 // property to determine the main size of the element. If an element is
 // not a flex item, 'flex' has no effect.
 //
-// Values: <flex-basis>
-// Default: 1
+// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
+// Default: See individual properties (1 1 0)
 //
 // http://w3.org/tr/css3-flexbox/#flex-property
 
-@mixin flex($values: 1) {
-  -webkit-box-flex: $values;
-     -moz-box-flex: $values;
-      -webkit-flex: $values;
-         -moz-flex: $values;
-          -ms-flex: $values;
-              flex: $values;
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+
+  $fg-boxflex: $fg;
+
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box-flex: $fg-boxflex;
+     -moz-box-flex: $fg-boxflex;
+      -webkit-flex: $fg $fs $fb;
+         -moz-flex: $fg $fs $fb;
+          -ms-flex: $fg $fs $fb;
+              flex: $fg $fs $fb;
 }
 
 // Flexbox Direction
@@ -48,6 +55,20 @@
 // http://w3.org/tr/css3-flexbox/#flex-direction-property
 
 @mixin flex-direction($value: row) {
+  @if $value == 'row-reverse' {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+  } @else if $value == 'column' {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+  } @else if $value == 'column-reverse' {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+  }
+
   -webkit-flex-direction: $value;
      -moz-flex-direction: $value;
       -ms-flex-direction: $value;
@@ -66,7 +87,7 @@
 // http://w3.org/tr/css3-flexbox/#flex-wrap-property
 
 @mixin flex-wrap($value: nowrap) {
-  @if $value == nowrap {
+  @if $value == 'nowrap' {
     -ms-flex-wrap: none;
   } @else {
     -ms-flex-wrap: $value;
@@ -182,16 +203,16 @@
 // http://w3.org/tr/css3-flexbox/#justify-content-property
 
 @mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
+  @if $value == 'flex-start' {
     -webkit-box-pack: start;
        -ms-flex-pack: start;
-  } @else if $value == flex-end {
+  } @else if $value == 'flex-end' {
     -webkit-box-pack: end;
        -ms-flex-pack: end;
-  } @else if $value == space-between {
+  } @else if $value == 'space-between' {
     -webkit-box-pack: justify;
        -ms-flex-pack: justify;
-  } @else if $value == space-around {
+  } @else if $value == 'space-around' {
     -ms-flex-pack: distribute;
   } @else {
     -webkit-box-pack: $value;
@@ -217,19 +238,19 @@
 //
 // http://w3.org/tr/css3-flexbox/#align-content-property
 
-@mixin align-content($align: stretch) {
-  @if $value == flex-start {
+@mixin align-content($value: stretch) {
+  @if $value == 'flex-start' {
     -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
+  } @else if $value == 'flex-end' {
     -ms-flex-line-pack: end;
   } @else {
     -ms-flex-line-pack: $value;
   }
 
-  -webkit-align-content: $align;
-     -moz-align-content: $align;
-      -ms-align-content: $align;
-          align-content: $align;
+  -webkit-align-content: $value;
+     -moz-align-content: $value;
+      -ms-align-content: $value;
+          align-content: $value;
 }
 
 // Flexbox Align Items
@@ -248,10 +269,10 @@
 // http://w3.org/tr/css3-flexbox/#align-items-property
 
 @mixin align-items($value: stretch) {
-  @if $value == flex-start {
+  @if $value == 'flex-start' {
     -webkit-box-align: start;
        -ms-flex-align: start;
-  } @else if $value == flex-end {
+  } @else if $value == 'flex-end' {
     -webkit-box-align: end;
        -ms-flex-align: end;
   } @else {
@@ -271,9 +292,9 @@
 // Default: auto
 
 @mixin align-self($value: auto) {
-  @if $value == flex-start {
+  @if $value == 'flex-start' {
     -ms-flex-item-align: start;
-  } @else if $value == flex-end {
+  } @else if $value == 'flex-end' {
     -ms-flex-item-align: end;
   } @else {
     -ms-flex-item-align: $value;