Layoutduskmoonimplemented6 demos

Flex

Flex arranges inline or wrapping content with a small layout API.

Import@duskmoon-dev/components/flex

4API sections

7documented props

4behavior scenarios

Key API

componentverticalwrapjustifyaligngap

Usage

When to use

Use it to build predictable page, toolbar, panel, or grid structure.
Keep layout primitives responsible for geometry and let child components own behavior.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Composition primitive

Documents spacing, responsive behavior, and nested regions used to build larger screens.

Stable geometry

Examples keep predictable dimensions so the surrounding UI does not jump while content changes.

Primary API surface

Flex is most often configured through `component`, `vertical`, `wrap`, `justify`.

Covered behavior

Renders children with default class

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

AlphaBetaGamma

Basic usage

authored

Import the component stylesheet and Flex from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function Example() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Renders children with default class

test-backed

Flex scenario from the component test coverage: renders children with default class.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexRendersChildrenWithDefaultDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Supports gap, justify, and align

test-backed

Flex scenario from the component test coverage: supports gap, justify, and align.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexSupportsGapJustifyAndDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Supports vertical and wrap

test-backed

Flex scenario from the component test coverage: supports vertical and wrap.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexSupportsVerticalAndWrapDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Forwards root ref

test-backed

Flex scenario from the component test coverage: forwards root ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexForwardsRootRefDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>
</div>

<div data-theme="moonlight">
  <Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>
</div>

API

The API reference below lists every parsed exported type or interface for Flex. Start with `component`, `vertical`, `wrap`, `justify` for common usage.

Types: packages/components/src/components/flex/Flex.types.tsScenarios: packages/components/src/components/flex/Flex.test.tsx

FlexPropsinterface extends Omit<ComponentProps<"div">, "ref">

Prop	Type	Required	Description
`component`	`ElementType`	No	component configures Flex.
`vertical`	`boolean`	No	vertical configures Flex.
`wrap`	`boolean \| React.CSSProperties["flexWrap"]`	No	wrap configures Flex.
`justify`	`FlexJustify`	No	justify configures Flex.
`align`	`FlexAlign`	No	align configures Flex.
`gap`	`FlexGap \| [FlexGap, FlexGap]`	No	gap configures Flex.
`flex`	`React.CSSProperties["flex"]`	No	flex configures Flex.

FlexJustifytype

| "normal" | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"

FlexAligntype

"normal" | "start" | "end" | "center" | "baseline" | "stretch"

FlexGaptype

"small" | "middle" | "large" | number