From 9a519bb7e33c65456aaaf401b6f90975309d416d Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 6 Feb 2016 01:30:11 -0800
Subject: [PATCH] Add vertical alignment docs for flexbox grid
---
docs/layout/flexbox-grid.md | 62 +++++++++++++++++++++++++++++++++++++
1 file changed, 62 insertions(+)
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 4ccd37f486..00097c3cd5 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -69,3 +69,65 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
</div>
{% endexample %}
</div>
+
+## Vertical alignment
+
+Use the flexbox alignment utilities to vertically align columns.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+ <div class="row flex-items-xs-top">
+ <div class="col">
+ One of three columns
+ </div>
+ <div class="col">
+ One of three columns
+ </div>
+ <div class="col">
+ One of three columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-center">
+ <div class="col">
+ One of three columns
+ </div>
+ <div class="col">
+ One of three columns
+ </div>
+ <div class="col">
+ One of three columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-bottom">
+ <div class="col">
+ One of three columns
+ </div>
+ <div class="col">
+ One of three columns
+ </div>
+ <div class="col">
+ One of three columns
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
+
+<div class="bd-example-row bd-example-row-flex-cols">
+{% example html %}
+<div class="container">
+ <div class="row">
+ <div class="col flex-xs-top">
+ One of three columns
+ </div>
+ <div class="col flex-xs-center">
+ One of three columns
+ </div>
+ <div class="col flex-xs-bottom">
+ One of three columns
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
--
GitLab