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.

<dt-stack class="d-fd-row-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>
<dt-stack class="d-fd-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>

Classes

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).

Flex Wrap

The flex-wrap property declares a flex container’s wrapping status. The default value is nowrap.

<dt-stack direction="row" class="d-fw-wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>

Classes

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).

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.

<dt-stack class="d-ff-row-reverse-wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>

Classes

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 Thursday, June 11, 2026