]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
stub out some docs
authorMark Otto <markd.otto@gmail.com>
Sun, 25 Dec 2016 01:46:35 +0000 (17:46 -0800)
committerMark Otto <markd.otto@gmail.com>
Sun, 25 Dec 2016 22:03:50 +0000 (14:03 -0800)
docs/utilities/flexbox.md

index 0c0cd5eedc55f852ffb139cb032b4e622f434e4c..67bec76493ba36304d891f76dfc2fd60267d984c 100644 (file)
@@ -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`.