Skip to content

Commit a441bba

Browse files
Merge pull request #74 from RtlZeroMemory/create-stack-wrap-layout
feat(layout): add wrap support for row/column stacks
2 parents 14d5c40 + d81b073 commit a441bba

5 files changed

Lines changed: 1760 additions & 7 deletions

File tree

docs/guide/layout.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,18 @@ Key props:
3333
- `gap` — spacing between children (cells or spacing key)
3434
- `align` — cross-axis alignment: `"start" | "center" | "end" | "stretch"`
3535
- `justify` — main-axis distribution: `"start" | "end" | "center" | "between" | "around" | "evenly"`
36+
- `wrap` — line wrapping for stacks (`false` by default)
37+
38+
### Stack wrap (`wrap`)
39+
40+
- `wrap` defaults to `false` (`row`/`column` stay single-line).
41+
- Set `wrap: true` to enable greedy line breaking in child order.
42+
- `row`: children wrap to the next visual line when adding the next child (`lineMain + gap + childWidth`) would exceed the row content width.
43+
- `column`: children wrap to the next visual column when adding the next child (`lineMain + gap + childHeight`) would exceed the column content height.
44+
- `gap` is used both between siblings in a line and between wrapped lines.
45+
- `justify` and `align` apply per line (not across the full wrapped block).
46+
- In wrap mode, flex distribution is line-local: each line distributes only its own remaining main-axis space.
47+
- In wrap mode, percentage child sizes resolve against the stack content box (container inner width/height), not per-line remainder. Line packing may still clamp a child to remaining line space.
3648

3749
### Example: Row + Column
3850

0 commit comments

Comments
 (0)