root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

This commit is contained in:
Mark Otto 2016-02-06 01:47:25 -08:00
parent 9e3214051d
commit 2a678d4b88
1 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
docs/layout/flexbox-grid.md
View File

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