💡 alignContent for cross-axis distribution of flex lines
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 45/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- cli
Research direction
Start with test/align-content.test.ts and inspect the vendored clay/clay.h layout structures and the layout pass that handles wrapped lines. Review the string-literal alignment work in #42 and the multi-line wrapping dependency in #63. Done means the requested alignContent variants distribute multiple flex lines as described, including the flex-end example, without JS-side positioning.
Written by the indexing model from the issue text.
Description
Is your feature request related to a problem?
Once a container can wrap into multiple flex lines, there's no way to distribute those lines along the cross axis—they pack to the start. With a 2-wide × 6-tall wrap container holding four single-cell children (two lines of two), the lines sit at the top (rows 0-1), with no way to push them to the end, center them, or space them out.
Describe the solution you'd like
An alignContent layout key that distributes free cross-axis space among the flex lines. For the example, alignContent: "flex-end" should push the two lines to the bottom (rows 4-5).
open("root", {
layout: {
direction: "ltr",
flexWrap: "wrap",
alignContent: "flex-end", // "flex-start" (default) | "flex-end" | "center" | "space-*" | "stretch"
},
});
alignContent should mirror the CSS align-content property. It's inert until there are multiple flex lines, so it depends on multi-line wrapping (#63).
Describe alternatives you've considered
Without renderer support, the only option is to compute line breaks and cross-axis offsets in JS and emit absolutely-positioned rows—which duplicates the layout engine's line-breaking and can't react to a resize.
Additional context
Failing test case on nm/repro/align-content (test · diff).
Clay's Clay_ChildAlignment (in the vendored clay/clay.h) offers only start/center/end on the cross axis; distributing whole flex lines—including the space-between/around/evenly/stretch variants—is a local addition to the layout pass. New string values should line up with the alignment string-literal refactor in #42 (re: #3).
- Dominant language
- TypeScript
- Stars
- 42
- Forks
- 2
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 12
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from bombshell-dev/tty
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
bombshell-dev/tty#61 · 1 reaction ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
bombshell-dev/tty#129 ·
-
question
Difficulty 5/5 Over a week Newbie friendliness 38/100
bombshell-dev/tty#112 ·
-
enhancement high priority
Difficulty 3/5 1-2 days Newbie friendliness 68/100
bombshell-dev/tty#83 · 2 comments ·
-
enhancement
Difficulty 4/5 3-5 days Newbie friendliness 48/100
bombshell-dev/tty#82 ·
All issues in bombshell-dev/tty
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
safetrustcr/dApp-SafeTrust#426 ·
-
area:workflow bug ready-for-agent
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
fil-donadoni/tolaria#4409 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
Fission-AI/OpenSpec#1960 ·
-
Add dependabot Open
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
corsairdev/corsair#1764 ·