Flex

Row (horizontal)

Basic

DesignAccessibilityComponents

import { Flex } from '@eekodigital/raster';

<Flex gap="2" wrap>
  <Tag>Design</Tag>
  <Tag>Accessibility</Tag>
  <Tag>Components</Tag>
</Flex>

Justify

Spread items across the main axis with justify="between".

CancelSave

<Flex justify="between">
  <Button variant="secondary">Cancel</Button>
  <Button>Save</Button>
</Flex>

No wrap

Items don’t wrap by default. Set wrap to enable wrapping.

OneTwoThreeFourFive

<Flex gap="3">
  <Tag>One</Tag>
  <Tag>Two</Tag>
  <Tag>Three</Tag>
</Flex>

Column (vertical)

Basic

Item oneItem twoItem three

<Flex direction="column" gap="4">
  <div>Item one</div>
  <div>Item two</div>
  <div>Item three</div>
</Flex>

Gap sizes

Gaps map directly to spacing tokens (--spacing-*).

Wider gapBetween items

<Flex direction="column" gap="8">
  <div>Wider gap</div>
  <div>Between items</div>
</Flex>

Alignment

Control cross-axis alignment with the align prop.

ShortA longer button label

<Flex direction="column" align="center">
  <Button>Short</Button>
  <Button>A longer button</Button>
</Flex>

Responsive

Props accept responsive objects with named breakpoints (sm, md, lg, xl) or custom pixel values.

<Flex direction={{ base: "column", "600px": "row" }} gap={{ base: "2", md: "4" }}>
  <div>First</div>
  <div>Second</div>
</Flex>

Semantic element

Use the as prop to change the rendered element.

<Flex as="nav" gap="4">
  <a href="/">Home</a>
  <a href="/about">About</a>
</Flex>

Props

Prop	Type	Default	Description
direction	”row” | “column"	"row”	Flex direction. Accepts responsive values.
gap	”1”–“24"	"4”	Gap between items (spacing token). Accepts responsive values.
align	”start” | “center” | “end” | “baseline” | “stretch"	"stretch”	Cross-axis alignment.
justify	”start” | “center” | “end” | “between” | “around"	"start”	Main-axis distribution.
wrap	boolean	false	Whether items wrap to new lines.
as	ElementType	”div”	Rendered HTML element.
className	string	—
style	CSSProperties	—