Skip to content

Spread

af-spread is a semantic layout recipe: inline items aligned to opposite ends. Equivalent utilities: af-inline af-items-center af-justify-between.

Use it for header left/right pairs. Prefer the recipe first; reach for Display & Alignment when you need a custom combination.

ClassPurposeExample
af-spreadInline spread (space-between)<div class="af-spread">
<div class="af-spread">
  <span>Left</span>
  <span>Right</span>
</div>

Explicit equivalent (when needed):

<div class="af-inline af-items-center af-justify-between">
  <span>Left</span>
  <span>Right</span>
</div>