diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 6686b5d599..0acca4fadb 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -33,23 +33,33 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`. Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). -Use `.flex-row` to set a horizontal direction. +Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side. {% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
{% endexample %} -Use `.flex-column` to set a vertical direction. +Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side. {% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
{% endexample %} @@ -57,7 +67,9 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-row` -- `.flex{{ bp.abbr }}-column`{% endfor %} +- `.flex{{ bp.abbr }}-row-reverse` +- `.flex{{ bp.abbr }}-column` +- `.flex{{ bp.abbr }}-column-reverse`{% endfor %} ## Justify content @@ -221,53 +233,93 @@ Similarly, move one flex item to the top or bottom of a container by mixing `ali ## 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`. +Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`. + +
+
+
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
+
+
+{% highlight html %} +
+ ... +
+{% endhighlight %} + +
+
+
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
+
+
+{% highlight html %} +
+ ... +
+{% endhighlight %} + +
+
+
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
+
+
+{% highlight html %} +
+ ... +
+{% endhighlight %} + {% 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 %} +- `.flex{{ bp.abbr }}-wrap` +- `.flex{{ bp.abbr }}-wrap-reverse`{% endfor %} ## Order