FlexBox

Flexbox layout primitive for stacks and rows.

Status: beta. Group: layout. Markdown version: /design-system/components/flex-box.md

When to use

FlexBox is the free-form single-axis primitive: every flexbox knob exposed as a prop, emitted as inline style; deliberately css-less. Numbers become px gaps; strings pass through, so prefer space tokens ("var(--space-internal-16)"). Use it for one-off arrangements where Stack's token scale is too coarse; when you just need vertical rhythm, Stack is the sharper tool.

When not to use

Do not rebuild Grid with wrap and width math; two-dimensional layouts belong to Grid.
Do not hardcode magic px strings when a space token exists; the rhythm gate will flag it.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

FlexBox props
Prop	Type	Default	Description	Required
`direction`	`"row" \| "row-reverse" \| "column" \| "column-reverse"`	`row`	Flex-direction.	No
`wrap`	`"nowrap" \| "wrap" \| "wrap-reverse"`	`nowrap`	Flex-wrap.	No
`justify`	`"center" \| "flex-start" \| "flex-end" \| "space-between" \| "space-around" \| "space-evenly"`	`flex-start`	Main-axis distribution.	No
`align`	`"center" \| "flex-start" \| "flex-end" \| "stretch" \| "baseline"`	`stretch`	Cross-axis item alignment.	No
`alignContent`	`"center" \| "flex-start" \| "flex-end" \| "space-between" \| "space-around" \| "stretch"`	none	Cross-axis line distribution when wrapping.	No
`gap`	`string \| number`	none	Shorthand gap (CSS length or number of px).	No
`rowGap`	`string \| number`	none	Row gap override.	No
`columnGap`	`string \| number`	none	Column gap override.	No
`style`	`React.CSSProperties`	none	Inline style overrides applied after generated flex declarations.	No
`children`	`React.ReactNode`	none	Flex items rendered inside the container.	Yes

Variants

Allowed align values: center, flex-start, flex-end, stretch, baseline (default stretch).
Allowed direction values: row, row-reverse, column, column-reverse (default row).
Allowed wrap values: nowrap, wrap, wrap-reverse (default nowrap).
Allowed justify values: center, flex-start, flex-end, space-between, space-around, space-evenly (default flex-start).
Allowed alignContent values: center, flex-start, flex-end, space-between, space-around, stretch.

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

FlexBox rules
Level	Rule	How it is checked
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-05-28.
SHOULD	Prefer Stack for standard token-gapped rows/columns; FlexBox is for the layouts Stack cannot express.	Not stated in the contract.
SHOULD	Pass string gaps as space tokens; numeric gaps are raw px and should stay rare.	Not stated in the contract.
SHOULD	Use align="center" for mixed-height inline clusters (icon + text + badge).	Not stated in the contract.
SHOULD	Lean on the div passthrough for aria roles when the flex row is semantically a group.	Not stated in the contract.
SHOULD NOT	Do not rebuild Grid with wrap and width math; two-dimensional layouts belong to Grid.	Not stated in the contract.
SHOULD NOT	Do not hardcode magic px strings when a space token exists; the rhythm gate will flag it.	Not stated in the contract.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { FlexBox } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/layout exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.
Also available as the custom element <dt-flex-box>; see the custom elements manifest.