From a393b9ce83aba7903209984d59223b22bc024291 Mon Sep 17 00:00:00 2001 From: harry Date: Tue, 27 Jun 2017 23:41:05 +0530 Subject: [PATCH] Add codepens for vertical alignment and central alignment! --- docs/pages/flexbox-utilities.md | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/docs/pages/flexbox-utilities.md b/docs/pages/flexbox-utilities.md index 9c44e776f..98dc81990 100644 --- 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:

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.

+
+edit on codepen button +
+ ```html_example
I'm at the top (default)
@@ -96,6 +100,10 @@ Stretch alignment is the default. To set parent alignment, use these classes:
``` +
+edit on codepen button +
+ ```html_example
I'm in the middle
@@ -103,6 +111,10 @@ Stretch alignment is the default. To set parent alignment, use these classes:
``` +
+edit on codepen button +
+ ```html_example
I'm at the bottom
@@ -110,6 +122,10 @@ Stretch alignment is the default. To set parent alignment, use these classes:
``` +
+edit on codepen button +
+ ```html_example
These cells have the same height
@@ -126,12 +142,17 @@ To align an individual child, use the below classes. They use the same alignment - `.align-self-bottom` - `.align-self-stretch` +
+edit on codepen button +
+ ```html_example
-
Align bottom
-
Align middle
-
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 bottom
+
Align middle
+
Align stretch
+
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?
+
``` --- -- 2.47.2