Layout
Flex
Flexbox layout primitive with token-mapped direction, align, justify, gap and padding.
A flexbox layout primitive. direction, align, justify, gap, wrap and the padding props map to literal Tailwind classes via static lookup maps, so the compiler always emits them. Purely presentational — extra props spread onto the element, and as changes the tag.
Import
import { Flex, Row, Column, Stack } from "@yuhuanowo/yunui";
Row, Column, and Stack are thin presets: Row fixes direction="row", Column/Stack fix direction="col" (Stack adds a default gap).
Direction & gap
Row with gap
1
2
3
Align & justify
Justify between, centered
start
end
Direction = column
Stacked
top
middle
bottom
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "center" | "start" | "end" | "stretch" | "baseline" | — | Cross-axis alignment (`align-items`). |
| as | ElementType<any, keyof IntrinsicElements> | — | Element/tag to render as. |
| direction | "col" | "row" | "row-reverse" | "col-reverse" | row | Main axis direction. |
| gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 4 | Gap between children, on the spacing scale. |
| justify | "center" | "start" | "end" | "between" | "around" | "evenly" | — | Main-axis distribution (`justify-content`). |
| padding | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | — | Padding on all sides, on the spacing scale. |
| px | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | — | Horizontal padding (`px`), on the spacing scale. |
| py | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | — | Vertical padding (`py`), on the spacing scale. |
| wrap | boolean | — | Allow children to wrap onto multiple lines. |