import { Flex } from "@nodus/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | CSSProperties['flexDirection'] | — | Flex direction |
align | CSSProperties['alignItems'] | — | Cross-axis alignment |
justify | CSSProperties['justifyContent'] | — | Main-axis alignment |
wrap | CSSProperties['flexWrap'] | — | Flex wrapping |
gap | SpaceToken | string | — | Gap between children |
inline | boolean | — | Use inline-flex instead of flex |
directionType
CSSProperties['flexDirection']Default —Flex direction
alignType
CSSProperties['alignItems']Default —Cross-axis alignment
justifyType
CSSProperties['justifyContent']Default —Main-axis alignment
wrapType
CSSProperties['flexWrap']Default —Flex wrapping
gapType
SpaceToken | stringDefault —Gap between children
inlineType
booleanDefault —Use inline-flex instead of flex
Metadataspace
MobileStacks / Scroll
Horizontal flex rows that exceed viewport width should use flex-wrap or switch to flex-col on mobile. Use the responsive-direction pattern: flex flex-col sm:flex-row.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?