Flexbox

Flex Direction

Utilities for sets direction of flex items.

Variant

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

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 {
  @extend
    .flex,
    .flex-column;
}

SCSS

Set child elements in flex-row direction.

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

SCSS

Set child elements in flex-row-reverse direction.

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

SCSS

Set child elements in flex-column-reverse direction.

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

SCSS