From 1903956749732314460cd493963861d8672fe593 Mon Sep 17 00:00:00 2001
From: Kevin Ball <kmball11@gmail.com>
Date: Mon, 14 Nov 2016 16:12:39 -0800
Subject: [PATCH] Update names and add responsiveness for child classes

---
 docs/pages/flexbox.md     | 23 ++++++++++++++++++-----
 scss/grid/_flex-grid.scss | 18 ++++++++++++++++--
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox.md
index 6fdcf3044..3a72e51a0 100644
--- 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 a6e6bdeb7..1ccb08cdd 100644
--- 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 {
-- 
2.47.2