document horizontal flex utils, update the classes for the middle vertical ones

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 00097c3cd54219b550c35a563b52f0c785aca7f0..2c78101d65bcd2d006915ccd2af118e90ba38e66 100644 (file)
--- 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>