kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Add vertical alignment docs for flexbox grid

Browse source
This commit is contained in:
Mark Otto 2016-02-06 01:30:11 -08:00
parent 7b7cf221cd
commit 9a519bb7e3
1 changed files with 62 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
docs/layout/flexbox-grid.md
View file

@ -69,3 +69,65 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
</div> </div>
{% endexample %} {% endexample %}
</div> </div>
## Vertical alignment
Use the flexbox alignment utilities to vertically align columns.
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-xs-top">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row flex-items-xs-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row flex-items-xs-bottom">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
{% endexample %}
</div>
<div class="bd-example-row bd-example-row-flex-cols">
{% example html %}
<div class="container">
<div class="row">
<div class="col flex-xs-top">
One of three columns
</div>
<div class="col flex-xs-center">
One of three columns
</div>
<div class="col flex-xs-bottom">
One of three columns
</div>
</div>
</div>
{% endexample %}
</div>