Flex Direction

Set the direction for flex items.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Usage

Row

Position items horizontally in a single row.

<div class="d-f fd-r cg-4 c-white">
  <div class="d-f ai-c jc-c w-16 h-16 bg-indigo ta-c">A</div>
  <div class="d-f ai-c jc-c w-16 h-16 bg-indigo ta-c">B</div>
  <div class="d-f ai-c jc-c w-16 h-16 bg-indigo ta-c">C</div>
</div>

Column

Position items vertically in a single column.

<div class="d-f fd-c rg-4 c-white">
  <div class="d-f ai-c jc-c bg-indigo ta-c">A</div>
  <div class="d-f ai-c jc-c bg-indigo ta-c">B</div>
  <div class="d-f ai-c jc-c bg-indigo ta-c">C</div>
</div>

Column Reverse

Position items vertically in reverse order.

<div class="d-f fd-cr rg-4 c-white">
  <div class="d-f ai-c jc-c bg-indigo ta-c">A</div>
  <div class="d-f ai-c jc-c bg-indigo ta-c">B</div>
  <div class="d-f ai-c jc-c bg-indigo ta-c">C</div>
</div>

Row Reverse

Position items horizontally in reverse order.

<div class="d-f fd-rr cg-4 c-white">
  <div class="d-f ai-c jc-c w-16 h-16 bg-indigo ta-c">A</div>
  <div class="d-f ai-c jc-c w-16 h-16 bg-indigo ta-c">B</div>
  <div class="d-f ai-c jc-c w-16 h-16 bg-indigo ta-c">C</div>
</div>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:fd-*

Small≥640px

md:fd-*

Medium≥768px

lg:fd-*

Large≥1024px

xxl:fd-*

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:fd-*