From b3c19ed9f6a5d0cb47a575a25164109bc399ca32 Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Thu, 11 May 2017 10:22:53 -0700 Subject: [PATCH] adds more flexbox examples --- docs/pages/flex-grid.md | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md index 01fbb0f3f..4ddf7a329 100644 --- 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. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
I'm in the middle!
@@ -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-*`.
-

In Foundation 6.2, we introduced the .align-self-* classes, which replace the old method of using .align-* classes on columns. The old classes will be removed completely in Foundation 6.3.

+

In Foundation 6.2, we introduced the .align-self-* classes, which replace the old method of using .align-* classes on columns. The old classes have been removed completely in Foundation 6.3.

+
+ +
+ Watch this part in video + + edit on codepen button
```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. +edit on codepen button + ```html
@@ -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. +edit on codepen button + ```html_example
Offset 2 on large
-- 2.47.2