From d3cf4759b093befc78e996e26f2037c4f20db86b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 26 Dec 2016 13:17:50 -0800
Subject: [PATCH] follow up to #21436 to add docs for the .flex-row-reverse ,
.flex-column-reverse, and .flex-wrap-reverse
---
docs/utilities/flexbox.md | 148 +++++++++++++++++++++++++-------------
1 file changed, 100 insertions(+), 48 deletions(-)
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 %}
-<div class="d-flex flex-row bd-highlight">
- <div class="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 class="d-flex flex-row bd-highlight mb-3">
+ <div class="p-2 bd-highlight">Flex item 1</div>
+ <div class="p-2 bd-highlight">Flex item 2</div>
+ <div class="p-2 bd-highlight">Flex item 3</div>
+</div>
+<div class="d-flex flex-row-reverse bd-highlight">
+ <div class="p-2 bd-highlight">Flex item 1</div>
+ <div class="p-2 bd-highlight">Flex item 2</div>
+ <div class="p-2 bd-highlight">Flex item 3</div>
</div>
{% 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 %}
-<div class="d-flex flex-column bd-highlight">
- <div class="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 class="d-flex flex-column bd-highlight mb-3">
+ <div class="p-2 bd-highlight">Flex item 1</div>
+ <div class="p-2 bd-highlight">Flex item 2</div>
+ <div class="p-2 bd-highlight">Flex item 3</div>
+</div>
+<div class="d-flex flex-column-reverse bd-highlight">
+ <div class="p-2 bd-highlight">Flex item 1</div>
+ <div class="p-2 bd-highlight">Flex item 2</div>
+ <div class="p-2 bd-highlight">Flex item 3</div>
</div>
{% 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`.
-{% example html %}
-<div class="d-flex flex-nowrap bd-highlight">
- <div class="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 class="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 class="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 class="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 class="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 class="bd-example">
+ <div class="d-flex flex-nowrap bd-highlight">
+ <div class="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 class="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 class="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 class="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 class="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>
-{% endexample %}
+{% highlight html %}
+<div class="d-flex flex-nowrap">
+ ...
+</div>
+{% endhighlight %}
-{% example html %}
-<div class="d-flex flex-wrap bd-highlight">
- <div class="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 class="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 class="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 class="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 class="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 class="bd-example">
+ <div class="d-flex flex-wrap bd-highlight">
+ <div class="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 class="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 class="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 class="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 class="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>
+{% highlight html %}
+<div class="d-flex flex-wrap">
+ ...
</div>
+{% endhighlight %}
+
+<div class="bd-example">
+ <div class="d-flex flex-wrap-reverse bd-highlight">
+ <div class="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 class="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 class="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 class="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 class="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>
+{% highlight html %}
+<div class="d-flex flex-wrap-reverse">
+ ...
+</div>
+{% endhighlight %}
+
+
+{% example html %}
{% 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
--
GitLab