adds more flexbox examples

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 01fbb0f3f2ca664f8ebe3d1a88b9aa40e35bbff1..4ddf7a329e448135275c342eb639f298b2f5c2e4 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -238,6 +238,12 @@ Your options for vertical alignment are `top`, `middle`, `bottom`, and `stretch`
 
 Applying a vertical alignment class to the flex row will affect every column directly inside it.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="13:32"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/BRrYQy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="row align-middle">
   <div class="columns">I'm in the middle!</div>
@@ -254,10 +260,18 @@ Applying a vertical alignment class to the flex row will affect every column dir
 
 ---
 
+### Vertical Alignment of child columns (individually)
+
 Similar alignment classes can also be applied to individual columns, which use the format `.align-self-*` instead of `.align-*`.
 
 <div class="warning callout">
-  <p>In Foundation 6.2, we introduced the <code>.align-self-&ast;</code> classes, which replace the old method of using <code>.align-&ast;</code> classes on columns. The old classes will be removed completely in Foundation 6.3.</p>
+  <p>In Foundation 6.2, we introduced the <code>.align-self-&ast;</code> classes, which replace the old method of using <code>.align-&ast;</code> classes on columns. The old classes have been removed completely in Foundation 6.3.</p>
+</div>
+
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="13:32"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/pPLaPe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
 ```html_example
@@ -279,6 +293,8 @@ There are times when you won't want each media query to be collapsed or uncollap
 
 The `.is-collapse-child` class removes negative margins from nested row under collapsed parent.
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/pPLaWP?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html
 <div class="row small-collapse medium-uncollapse">
   <div class="small-6 columns">
@@ -315,6 +331,8 @@ The `.is-collapse-child` class removes negative margins from nested row under co
 
 Offsets work identically to the float grid, by applying `margin-left` to a column.
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/mmxXpb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <div class="row">
   <div class="small-4 large-offset-2 columns">Offset 2 on large</div>