Dialtone

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.

ClassOutputDescription
.d-fd-rowflex-direction: rowSets the container's flex direction to row. This is the initial value.
.d-fd-row-reverseflex-direction: row-reverseReverses the containers flex direction, but still in a row.
.d-fd-columnflex-direction: columnSets the container's flex direction to a column.
.d-fd-column-reverseflex-direction: column-reverseSets the container's flex direction to a column and reverses it.
.d-fd-unsetflex-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.

ClassOutputDescription
.d-fw-nowrapflex-wrap: nowrapDeclares a container's objects should not wrap. This is the initial value.
.d-fw-wrapflex-wrap: wrapDeclares a container's objects should wrap to another row or column (depending on the declared direction) based on content size.
.d-fw-wrap-reverseflex-wrap: wrap-reverseReverses 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-unsetflex-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.

ClassOutputDescription
.d-ff-row-nowrapflex-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-wrapflex-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-reverseflex-flow: row wrap-reverse;Sets the direction to row and reverses the order of each row.
.d-ff-row-reverse-nowrapflex-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-wrapflex-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-reverseflex-flow: row-reverse wrap-reverse;Reverses both the overall order of all child elements as well as each row.
.d-ff-column-nowrapflex-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-wrapflex-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-reverseflex-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-nowrapflex-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-wrapflex-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-reverseflex-flow: column-reverse wrap-reverse;Reverses both the overall order of all child elements as well as each column.
.d-ff-unsetflex-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>
Last Updated: