Flex

Overview

naUI ships two layers of flex tooling:

• Atomic utilities - single-property classes like na-flex, na-items-center, na-justify-between.
• Named layout patterns - one-class shortcuts (na-stack, na-cluster, na-split, na-row) that bundle the most common combinations.

Display

Direction

Wrap

Flex sizing

Alignment

Gap

Named layout patterns

Single-class shortcuts that bundle alignment + direction + gap into a common layout pattern.

Stack

Vertical column with equal gap between children.

<div class="na-stack">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Cluster

Wrapping inline row - items flow left and wrap when they run out of room. Perfect for tag groups and toolbar buttons.

<div class="na-cluster">
  <span class="na-badge na-badge-primary">naUI</span>
  <span class="na-badge na-badge-secondary">CSS</span>
  <span class="na-badge na-badge-success">Open Source</span>
</div>

Split

Pushes the first and last child to opposite ends. Common for toolbars, list rows, and card footers.

<div class="na-split">
  <span>Section title</span>
  <a href="#" class="na-button na-button-ghost na-button-s">View all</a>
</div>

Row

Horizontal row with vertically centred children and a consistent gap.

<div class="na-row">
  <img src="avatar.jpg" class="na-avatar">
  <div>
    <div>Jane Doe</div>
    <div>Engineer</div>
  </div>
</div>

Flex center

Centers children on both axes - ideal for hero banners, empty states, and icon buttons.

<div class="na-flex-center" style="min-height:200px">
  <p>Perfectly centred</p>
</div>

Flex cover

na-flex-cover is an absolute overlay that fills its positioned parent and centres children. Use it for loading spinners, image overlays, and empty state layers.

<div class="na-relative" style="min-height:160px">
  <img src="cover.jpg" class="na-width-full na-height-full" style="object-fit:cover">
  <div class="na-flex-cover" style="background:rgba(0,0,0,.4)">
    <span style="color:#fff">Overlay text</span>
  </div>
</div>

Class reference