diff options
| author | Mark Otto <[email protected]> | 2016-12-24 17:46:35 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-25 14:03:50 -0800 |
| commit | f2f489c83790fcdeaf2fddd7773970f9fb0b2f8a (patch) | |
| tree | 2ee3e0e2c39beeb10e420ff9a45d8499cb03bf22 /docs/utilities | |
| parent | 43c206d6ffbb869c13a69ae5456628cea020ee22 (diff) | |
| download | bootstrap-f2f489c83790fcdeaf2fddd7773970f9fb0b2f8a.tar.xz bootstrap-f2f489c83790fcdeaf2fddd7773970f9fb0b2f8a.zip | |
stub out some docs
Diffstat (limited to 'docs/utilities')
| -rw-r--r-- | docs/utilities/flexbox.md | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 0c0cd5eed..67bec7649 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -59,6 +59,19 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. - `.flex{{ bp.abbr }}-row` - `.flex{{ bp.abbr }}-column`{% endfor %} +## 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. + +{% example html %} +<div class="d-flex justify-content-end bd-highlight"> + <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> +{% endexample %} + + ## Wrap Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. |
