Skip to content

Spread

af-spread is a structure primitive: 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">
Left Right
<div class="af-spread">
  <span>Left</span>
  <span>Right</span>
</div>

Explicit equivalent (when needed):

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