Flex | NDS - Vanilla National Design System

Basic Alignment

Add nds-flex to any element to turn it into a flex container with sensible defaults. Override --justify, --align, and --gap inline to tune the layout.

First Second Third


<div class="nds-flex" style="--justify: flex-start; width: 100%;">
    <span class="nds-tag nds-sm"><span class="nds-label">First</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Second</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Third</span></span>
</div>

Direction Control

Add nds-row or nds-col to flip the main axis. Add nds-reverse to invert child order — row-reverse on a row, column-reverse with nds-col — handy for RTL action-flip patterns.


<div class="nds-flex nds-row">
    <button class="nds-btn nds-primary nds-sm">
        <span class="nds-label">Accept</span>
    </button>
    <button class="nds-btn nds-secondary-outline nds-sm">
        <span class="nds-label">Review</span>
    </button>
    <button class="nds-btn nds-subtle nds-sm">
        <span class="nds-label">Dismiss</span>
    </button>
</div>

Wrapping

Add nds-wrap to let children flow onto multiple lines when the container is too narrow. Use nds-nowrap to force a single line even when content overflows.

Government Digital Transformation Accessibility Design System Standards Services Compliance Open Data


<div class="nds-flex nds-wrap" style="--gap: var(--spacing-sm); width: 300px;">
    <span class="nds-tag nds-sm"><span class="nds-label">Government</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Digital Transformation</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Accessibility</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Design System</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Standards</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Services</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Compliance</span></span>
    <span class="nds-tag nds-sm"><span class="nds-label">Open Data</span></span>
</div>

Built-in Features

CSS-Only

Works with a single class and zero JavaScript. No initialization, no event listeners, no cleanup.

Sensible Defaults

Items stretch across the cross-axis, start along the main axis, and separate by --spacing-xl gap out of the box.

Custom Property API

Override --justify, --align, and --gap inline or in a parent style without writing a single new class.

Unscoped Direction

nds-row and nds-col flip direction on any flex element, including components that declare their own display: flex like card actions.

Wrap Control

nds-wrap enables multi-line flow; nds-nowrap forces a single line. Combine with child min-width for container-responsive stacking.

Usage Guidelines

Best Practices

Use nds-flex for quick one-off alignment or direction fixes on ad-hoc elements where a component does not already handle the layout
Use Grid instead for page-level or section-level layout composition. Grid handles responsive column counts and gap halving in a single rule through its tier-based custom properties
Use nds-row or nds-col standalone (without nds-flex) when the parent already declares display: flex in its own component SCSS, such as the nds-card-actions nds-row action-flip pattern
Override defaults with inline --justify, --align, and --gap CSS variables rather than extending the utility with new modifier classes. This keeps the CSS output small and the API predictable
For container-responsive stacking (items stack when the container gets narrow, not when the viewport changes), add nds-wrap with a min-width on children. More resilient than breakpoint-based direction swaps
Do not add nds-flex to elements inside components that already ship their own flex logic (cards, forms, main navigation). The component handles alignment more precisely than a generic utility
Do not use nds-flex for multi-breakpoint layout composition. If you need a row that becomes a column on mobile, use Grid with --max-col: 2; --min-col: 1; instead. Flex direction swaps rarely come alone and usually trigger other responsive adjustments
The flex container is block-level by default (fills parent inline direction, respects parent padding). When it must shrink to its content's width, use inline width: fit-content or switch to display: inline-flex

Modifier Classes

Class	Description
`nds-flex`	Declares the element as a flex container with default gap, stretch cross-axis alignment, and start main-axis alignment
`nds-row`	Sets `flex-direction: row`. Unscoped: works with or without `nds-flex` on the same element
`nds-col`	Sets `flex-direction: column`. Unscoped: works with or without `nds-flex` on the same element
`nds-reverse`	Reverses visual child order: `row-reverse` on a flex or `nds-row` container, `column-reverse` when combined with `nds-col`. Scoped to the flex utility, so it never overrides a component's own `nds-reverse`
`nds-wrap`	Enables `flex-wrap: wrap` so children flow onto multiple lines when the container is too narrow
`nds-nowrap`	Forces `flex-wrap: nowrap` so children stay on one line, potentially overflowing

CSS Custom Properties

Property	Default	Description
`--justify`	`flex-start`	Value for `justify-content`. Accepts any valid CSS keyword such as `center`, `flex-end`, `space-between`
`--align`	`stretch`	Value for `align-items`. Accepts keywords such as `center`, `start`, `end`, `baseline`
`--gap`	`var(--spacing-xl)`	Gap between children. Accepts any CSS length or spacing token such as `var(--spacing-md)` or `0`