Add codepens for vertical alignment and central alignment!

diff --git a/docs/pages/flexbox-utilities.md b/docs/pages/flexbox-utilities.md
index 9c44e776f789ff2d801dcff47dfb000bebc2d335..98dc81990754cc7b0d28ff0468df91b395902cc9 100644 (file)
--- a/docs/pages/flexbox-utilities.md
+++ b/docs/pages/flexbox-utilities.md
@@ -89,6 +89,10 @@ Stretch alignment is the default. To set parent alignment, use these classes:
   <p>Note that with vertical alignment, we use the term "middle" for the midpoint, while with horizontal alignment, we use the term "center". As we can't have two CSS classes with the same name, thus we are using different terms.</p>
 </div>
 
+<div class="docs-codepen-container">
+<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/LLOgYx?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="grid-x grid-padding-x align-top">
   <div class="cell small-4">I'm at the top (default)</div>
@@ -96,6 +100,10 @@ Stretch alignment is the default. To set parent alignment, use these classes:
 </div>
 ```
 
+<div class="docs-codepen-container">
+<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/vZWVOW?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="grid-x grid-padding-x align-middle">
   <div class="cell small-4">I'm in the middle</div>
@@ -103,6 +111,10 @@ Stretch alignment is the default. To set parent alignment, use these classes:
 </div>
 ```
 
+<div class="docs-codepen-container">
+<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/awVRvZ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="grid-x grid-padding-x align-bottom">
   <div class="cell small-4">I'm at the bottom</div>
@@ -110,6 +122,10 @@ Stretch alignment is the default. To set parent alignment, use these classes:
 </div>
 ```
 
+<div class="docs-codepen-container">
+<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/wePYKY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="grid-x grid-padding-x align-stretch">
   <div class="cell small-4">These cells have the same height</div>
@@ -126,12 +142,17 @@ To align an individual child, use the below classes. They use the same alignment
 - `.align-self-bottom`
 - `.align-self-stretch`
 
+<div class="docs-codepen-container">
+<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/NgwOxe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="grid-x grid-padding-x">
-  <div class="cell small-4 align-self-bottom"><div class="demo">Align bottom</div></div>
-  <div class="cell small-4 align-self-middle"><div class="demo">Align middle</div></div>
-  <div class="cell small-4 align-self-top"><div class="demo">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>
-</div>
+    <div class="cell small-3 align-self-bottom"><div class="demo">Align bottom</div></div>
+    <div class="cell small-3 align-self-middle"><div class="demo">Align middle</div></div>
+    <div class="cell small-3 align-self-stretch"><div class="demo">Align stretch</div></div>
+    <div class="cell small-3 align-self-top"><div class="demo">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>
+  </div>
 ```
 
 ---