document horizontal flex utils, update the classes for the middle vertical ones
This commit is contained in:
parent
9e3214051d
commit
2a678d4b88
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue