From f99d1796904cb0a28a926963dd5b8407cbbff72e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 18:03:16 -0800 Subject: [PATCH] reorder docs --- docs/utilities/flexbox.md | 125 +++++++++++++++++++------------------- 1 file changed, 62 insertions(+), 63 deletions(-) diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 67bec76493..eff4fb1903 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -59,69 +59,6 @@ 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 %} -
-
Flex item
-
Flex item
-
Flex item
-
-{% 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`. - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - -Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. - -{% for bp in site.data.breakpoints %} -- `.flex{{ bp.abbr }}-nowrap` -- `.flex{{ bp.abbr }}-wrap`{% endfor %} - ## Justify content 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`. @@ -242,6 +179,68 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
{% endhighlight %} +## 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 %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% 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`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. + +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-nowrap` +- `.flex{{ bp.abbr }}-wrap`{% endfor %} + ## Order Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed.