diff options
| author | Mark Otto <[email protected]> | 2016-12-24 18:11:57 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-25 14:03:50 -0800 |
| commit | 4ca1a7f0773d1892723efc09e2ccb064dde309f5 (patch) | |
| tree | e3afcf1b3dba7e3b22ad2d1cf575fc1f6f2931c4 | |
| parent | 4f85513608d16e0ffe5fae952c28cf1a99da8b75 (diff) | |
| download | bootstrap-4ca1a7f0773d1892723efc09e2ccb064dde309f5.tar.xz bootstrap-4ca1a7f0773d1892723efc09e2ccb064dde309f5.zip | |
document it all, add align items examples
| -rw-r--r-- | docs/utilities/flexbox.md | 32 |
1 files changed, 30 insertions, 2 deletions
diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index eff4fb190..6686b5d59 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -181,14 +181,42 @@ Use `align-self` utilities on flexbox items to individually change their alignme ## Auto margins -Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. +Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. + +### With justify-content + +Easily move all flex items to one side, but keep another on the opposite end by mixing `justify-content` with `margin-right: auto` or `margin-left: auto`. {% example html %} -<div class="d-flex justify-content-end bd-highlight"> +<div class="d-flex justify-content-end bd-highlight mb-3"> <div class="mr-auto 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-start bd-highlight"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="ml-auto p-2 bd-highlight">Flex item</div> +</div> +{% endexample %} + +### With align-items + +Similarly, move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`. + +{% example html %} +<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;"> + <div class="mb-auto 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 flex-column bd-highlight mb-3" style="height: 200px;"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="mt-auto p-2 bd-highlight">Flex item</div> +</div> {% endexample %} ## Wrap |