Direction, Wrap, & Flow
Utilities for setting an object's flex direction, wrap, and flow directions.
Flex Direction
The flex-direction property declares a flex container’s main axis direction. The default value is row.
| Class | Output | Description |
|---|---|---|
| .d-fd-row | flex-direction: row | Sets the container's flex direction to row. This is the initial value. |
| .d-fd-row-reverse | flex-direction: row-reverse | Reverses the containers flex direction, but still in a row. |
| .d-fd-column | flex-direction: column | Sets the container's flex direction to a column. |
| .d-fd-column-reverse | flex-direction: column-reverse | Sets the container's flex direction to a column and reverses it. |
| .d-fd-unset | flex-direction: unset; | Resets the flex-direction value to its initial value (row). |
<div class="d-d-flex d-fd-row-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="d-d-flex d-fd-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Flex Wrap
The flex-wrap property declares a flex container’s wrapping status. The default value is nowrap.
| Class | Output | Description |
|---|---|---|
| .d-fw-nowrap | flex-wrap: nowrap | Declares a container's objects should not wrap. This is the initial value. |
| .d-fw-wrap | flex-wrap: wrap | Declares a container's objects should wrap to another row or column (depending on the declared direction) based on content size. |
| .d-fw-wrap-reverse | flex-wrap: wrap-reverse | Reverses the wrap direction for container's objects, but on a row or column level. It does not re-order the content, but reverses the order of each row or column. More than one row or column must be present for this to visually apply. |
| .d-fw-unset | flex-wrap: unset; | Resets the flex-wrap value to its initial value (nowrap). |
<div class="d-d-flex d-fw-wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Flex Flow
The flex-flow property is a shorthand property that sets allows you to quickly set the above flex-direction and flex-wrap properties. By default all flex containers are set to row and nowrap.
| Class | Output | Description |
|---|---|---|
| .d-ff-row-nowrap | flex-flow: row nowrap; | Sets the direction to row, but does not allow child items to wrap. This is the default flex-flow value. |
| .d-ff-row-wrap | flex-flow: row wrap; | Establishes the layout as horizontal rows that display left to right in `ltr` and wraps onto multiple lines top to bottom. |
| .d-ff-row-wrap-reverse | flex-flow: row wrap-reverse; | Sets the direction to row and reverses the order of each row. |
| .d-ff-row-reverse-nowrap | flex-flow: row-reverse nowrap; | Sets the direction to row, but reverses the order of all child items. Child items will not be allowed to wrap to another row. |
| .d-ff-row-reverse-wrap | flex-flow: row-reverse wrap; | Sets the direction to row, but reverses the order of all child items. Child items are allowed to wrap to another row. |
| .d-ff-row-reverse-wrap-reverse | flex-flow: row-reverse wrap-reverse; | Reverses both the overall order of all child elements as well as each row. |
| .d-ff-column-nowrap | flex-flow: column nowrap; | Sets the direction to column, but does not allow child items to wrap. This is the default flex-flow value. |
| .d-ff-column-wrap | flex-flow: column wrap; | Establishes the layout as horizontal columns that display top to bottom in `ltr` and wraps onto multiple columns left to right. |
| .d-ff-column-wrap-reverse | flex-flow: column wrap-reverse; | Sets the direction to column and reverses the order of each distinct columm. It does not reverse the overall order of child elements. |
| .d-ff-column-reverse-nowrap | flex-flow: column-reverse nowrap; | Sets the direction to column, but reverses the order of all child items. Child items will not be allowed to wrap to another column. |
| .d-ff-column-reverse-wrap | flex-flow: column-reverse wrap; | Sets the direction to column, but reverses the order of all child items. Child items are allowed to wrap to another column. |
| .d-ff-column-reverse-wrap-reverse | flex-flow: column-reverse wrap-reverse; | Reverses both the overall order of all child elements as well as each column. |
| .d-ff-unset | flex-flow: unset; | Resets the flex-flow value to its initial value (row nowrap). |
<div class="d-d-flex d-ff-row-reverse-wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>