mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
This commit is contained in:
Mark Otto
parent
14fe088cab
commit
d3cf4759b0
@ -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`.
|
||||
|
||||
<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>
|
||||
{% highlight html %}
|
||||
<div class="d-flex flex-nowrap">
|
||||
...
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<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 %}
|
||||
<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>
|
||||
{% endexample %}
|
||||
|
||||
{% 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>
|
||||
{% 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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user