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

Direction Control

Add nds-row or nds-col to flip the main axis. Combine with nds-reverse to invert child order for layout or RTL action-flip patterns.

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

Built-in Features

CSS-Only

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

Sensible Defaults

Items align to center 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.

Reverse Order

Pair nds-reverse with a direction class to flip visual child order, useful for RTL-specific action arrangements.

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
Keep the width: 100% default in mind. When the flex container must only occupy its content's width, wrap it in an inline-level parent or override with inline width: auto

Modifier Classes

Class	Description
`nds-flex`	Declares the element as a flex container with default gap, center 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`	Combined with `nds-row` or `nds-col`, reverses visual child order (`row-reverse` or `column-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`	`center`	Value for `align-items`. Accepts keywords such as `start`, `end`, `stretch`, `baseline`
`--gap`	`var(--spacing-xl)`	Gap between children. Accepts any CSS length or spacing token such as `var(--spacing-md)` or `0`