Flex direction

Utilities for controlling flex direction.

Quick reference

Class	Styles
af-row	flex-direction: row
af-row-reverse	flex-direction: row-reverse
af-col	flex-direction: column
af-col-reverse	flex-direction: column-reverse
af-flex-reverse	flex-direction: row-reverse

Examples

Row vs column

One

Two

Three

<div class="af-flex af-col" style="gap: 0.5rem;">
  <div class="af-badge">
    One
  </div>
  <div class="af-badge">
    Two
  </div>
  <div class="af-badge">
    Three
  </div>
</div>

Responsive variants

All flex-direction utilities support responsive variants using the @{bp} suffix:

• af-col@md

See Responsive Suffix for syntax and breakpoints.

Related

• Flex wrap