Update names and add responsiveness for child classes

diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox.md
index 6fdcf3044827b50694f0b30f7576073419462caa..3a72e51a08d8eba04413828ecfdb2b53841298c8 100644 (file)
--- a/docs/pages/flexbox.md
+++ b/docs/pages/flexbox.md
@@ -173,10 +173,10 @@ To make something a flex container, simply apply
 
 And to change its flex direction from row to column you can use the helper classes:
 
-- `.flex-direct-row` (default)
-- `.flex-direct-row-reverse`
-- `.flex-direct-column`
-- `.flex-direct-column-reverse`
+- `.flex-dir-row` (default)
+- `.flex-dir-row-reverse`
+- `.flex-dir-column`
+- `.flex-dir-column-reverse`
 
 For children, there are 3 quick helper classes
 
@@ -186,7 +186,7 @@ For children, there are 3 quick helper classes
 
 ```html_example
 <div class="row">
-  <div class="column flex-container flex-direct-column">
+  <div class="column flex-container flex-dir-column">
     <div class="callout flex-child-auto">Auto</div>
     <div class="callout flex-child-auto">Auto</div>
     <div class="callout flex-child-shrink">Shrink</div>
@@ -197,6 +197,19 @@ For children, there are 3 quick helper classes
 </div>
 ```
 
+All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints.  So you can do things like
+
+```html_example
+  <div class="row">
+    <div class="column large-12 flex-container flex-dir-column large-flex-dir-row">
+      <div class="callout flex-child-auto">Auto</div>
+      <div class="callout flex-child-auto">Auto</div>
+      <div class="callout flex-child-shrink large-flex-child-auto">Auto on Large</div>
+    </div>
+    <div class="column align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
+  </div>
+```
+
 ---
 
 ## Helper Mixins

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index a6e6bdeb72ce206782228e0baf8c813b74271481..1ccb08cdd16c94424e2c60f40b728cea502198d0 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -218,7 +218,7 @@
   }
 
   @each $dir, $prop in $-zf-flex-direction {
-    .flex-direct-#{$dir} {
+    .flex-dir-#{$dir} {
       @include flex-direction($prop);
     }
   }
@@ -261,11 +261,25 @@
         }
       }
 
+      // direction helper classes
       @each $dir, $prop in $-zf-flex-direction {
-        .#{$-zf-size}-flex-direct-#{$dir} {
+        .#{$-zf-size}-flex-dir-#{$dir} {
           @include flex-direction($prop);
         }
       }
+      // child helper classes
+      .#{$-zf-size}-flex-child-auto {
+        flex: 1 1 auto;
+      }
+
+      .#{$-zf-size}-flex-child-grow {
+        flex: 1 0 auto;
+      }
+
+      .#{$-zf-size}-flex-child-shrink {
+        flex: 0 1 auto;
+      }
+
       // Auto-stacking/unstacking
       @at-root (without: media) {
         .row.#{$-zf-size}-unstack {