Utilities for setting an object's flex direction, wrap, and flow directions.
The flex-direction property declares a flex container’s main axis direction. The default value is row.
<dt-stack class="d-fd-row-reverse d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack> <dt-stack class="d-fd-row d-w100p d-mbs-200 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
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). |
The flex-wrap property declares a flex container’s wrapping status. The default value is nowrap.
<dt-stack direction="row" class="d-fw-wrap d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-w25p d-h-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-w50p d-h-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-w75p d-h-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
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). |
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.
<dt-stack class="d-ff-row-reverse-wrap d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-w25p d-h-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-w50p d-h-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-m-100 d-p-200 d-w75p d-h-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
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). |
Direction, Wrap, & Flow documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope