diff options
| author | Mark Otto <[email protected]> | 2016-12-23 13:15:55 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-24 14:21:04 -0800 |
| commit | 7d47a0115864b2a5e429f52470323c79067d8c5e (patch) | |
| tree | 1866e87a38581d5db1d1b64b73507fcbb5940965 /docs | |
| parent | 463e8bee76aa49cc443bf87120d2bee49b329146 (diff) | |
| download | bootstrap-7d47a0115864b2a5e429f52470323c79067d8c5e.tar.xz bootstrap-7d47a0115864b2a5e429f52470323c79067d8c5e.zip | |
change presentation of those utils docs
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/utilities/flexbox.md | 103 |
1 files changed, 68 insertions, 35 deletions
diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index bc2a9cdb0..935922fb9 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -113,49 +113,82 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. -{% example html %} -<div class="d-flex justify-content-start bd-highlight mb-3"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> -</div> -<div class="d-flex justify-content-end bd-highlight mb-3"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> -</div> -<div class="d-flex justify-content-center bd-highlight mb-3"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> -</div> -<div class="d-flex justify-content-between bd-highlight mb-3"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> -</div> -<div class="d-flex justify-content-around bd-highlight"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> +<div class="bd-example"> + <div class="d-flex justify-content-start bd-highlight mb-3"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex justify-content-end bd-highlight mb-3"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex justify-content-center bd-highlight mb-3"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex justify-content-between bd-highlight mb-3"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex justify-content-around bd-highlight"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> </div> -{% endexample %} + +{% highlight html %} +<div class="d-flex justify-content-start">...</div> +<div class="d-flex justify-content-end">...</div> +<div class="d-flex justify-content-center">...</div> +<div class="d-flex justify-content-between">...</div> +<div class="d-flex justify-content-around">...</div> +{% endhighlight %} ## Align items Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. -{% example html %} -<div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> +<div class="bd-example"> + <div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> + <div class="d-flex align-items-stretch bd-highlight" style="height: 100px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> </div> -<div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> + +{% highlight html %} +<div class="d-flex align-items-start">...</div> +<div class="d-flex align-items-end">...</div> +<div class="d-flex align-items-center">...</div> +<div class="d-flex align-items-baseline">...</div> +<div class="d-flex align-items-stretch">...</div> +{% endhighlight %} </div> <div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px"> <div class="p-2 bd-highlight">Flex item</div> |