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