From 2a678d4b8813870e9cdc14d666b9a3bcf36fe1f8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 6 Feb 2016 01:47:25 -0800
Subject: [PATCH] document horizontal flex utils, update the classes for the
 middle vertical ones

---
 docs/layout/flexbox-grid.md | 55 +++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 00097c3cd5..2c78101d65 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -88,7 +88,7 @@ Use the flexbox alignment utilities to vertically align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-xs-center">
+  <div class="row flex-items-xs-middle">
     <div class="col">
       One of three columns
     </div>
@@ -121,7 +121,7 @@ Use the flexbox alignment utilities to vertically align columns.
     <div class="col flex-xs-top">
       One of three columns
     </div>
-    <div class="col flex-xs-center">
+    <div class="col flex-xs-middle">
       One of three columns
     </div>
     <div class="col flex-xs-bottom">
@@ -131,3 +131,54 @@ Use the flexbox alignment utilities to vertically align columns.
 </div>
 {% endexample %}
 </div>
+
+## Horizontal alignment
+
+Flexbox utilities for horizontal alignment also exist for a number of layout options.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row flex-items-xs-left">
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-center">
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-right">
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-around">
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-between">
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+    <div class="col col-xs-4">
+      One of two columns
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
-- 
2.47.2