From: Mark Otto <markdotto@gmail.com>
Date: Sat, 6 Feb 2016 09:47:25 +0000 (-0800)
Subject: document horizontal flex utils, update the classes for the middle vertical ones
X-Git-Tag: v4.0.0-alpha.3~312^2~17
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2a678d4b8813870e9cdc14d666b9a3bcf36fe1f8;p=thirdparty%2Fbootstrap.git

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 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>