Flex
Overview​
Flex is a Box with display: flex and shorthand props for common flexbox controls. Use it for one‑dimensional layout (row or column).
Live demoInteractive
Left
Right
Anatomy​
- Root: The flex container.
- Items: Direct children arranged along the main axis.
Usage​
import { Flex } from '@grasdouble/lufa_design-system';
<Flex justify="between" align="center">
<div>Left</div>
<div>Right</div>
</Flex>;
Props​
Flex inherits all Box props.
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'row' | flex-direction. |
wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | flex-wrap. |
justify | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'start' | justify-content. |
align | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'stretch' | align-items. |
gap | 'tight' | 'compact' | 'default' | 'comfortable' | 'spacious' | - | Tokenized gap. |
inline | boolean | false | Sets display: inline-flex. |
Accessibility​
Flex only changes layout. Keep DOM order aligned with visual order to avoid confusing screen readers.
Theming & Tokens​
gap uses spacing tokens. Color and typography tokens come from Box props or child components.
Do / Don’t​
Do
Use Flex for one‑dimensional layout where order and alignment matter.
Don’t
Avoid using Flex to create complex two‑dimensional grids—use Grid instead.