Flexbox

Flex Direction

Utilities for sets direction of flex items.

Variant

Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled

API

class	css
flex-row	flex-direction: row
flex-row-reverse	flex-direction: row-reverse
flex-column	flex-direction: column
flex-column-reverse	flex-direction: column-reverse

Usage

Set child elements in flex-column direction.

<!-- parent -->
<div class="flex ... flex-column">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy-parent {
  .flex,
  .flex-column;
}

SCSS

Set child elements in flex-row direction.

.dummy-parent {
  .flex,
  .flex-column;
}

SCSS

Set child elements in flex-row-reverse direction.

.dummy-parent {
  .flex,
  .flex-column;
}

SCSS

Set child elements in flex-column-reverse direction.

.dummy-parent {
  .flex,
  .flex-column;
}

SCSS