Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →hashgraph-online/flexbox-math
Calculate and debug Flexbox layout math for flex base size, flex-basis, flex-grow, flex-shrink, the flex shorthand, fractional grow values, and min/max constraints.
Passed 21 of 22 test cases with the skill, and 20 of 22 without it.
2 fixed19 passed either way0 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
A flex container is 600px wide with two items: Item A (flex-basis: 100px, flex-grow: 1, margin-right: auto) and Item B (flex-basis: 100px, flex-grow: 1). How does the presence of margin-right: auto affect the flex-grow calculation for space distribution?
| Checked | Without skill | With skill |
|---|---|---|
| Auto margins absorb all 400px positive free space in Section 9.5 before flexible length resolution in Section 9.7 | Missed | Passed |
| flex-grow distributes 0px to items because remaining free space for grow distribution is 0px | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill for one-dimensional layout distribution. It focuses on the arithmetic that determines base sizes, free space, grow allocation, shrink allocation, and constraint clamping.
guidelines.md to select the smallest relevant file set.references/flex-distribution/rules.md for implementation decisions.references/flex-distribution/examples.md when editing code.workflows/debug-flex-distribution.md for multi-step derivation or debugging.| Resource | Purpose |
|---|---|
guidelines.md | Routes tasks to the right reference files |
references/source-map.md | Book source and chapter/section traceability |
references/flex-distribution/knowledge.md | Core concepts and terminology |
references/flex-distribution/rules.md | Practical rules, guidelines, and exceptions |
references/flex-distribution/examples.md | Bad/good examples and refactoring approach |
references/flex-distribution/patterns.md | Reusable formula and implementation patterns |
references/flex-distribution/checklist.md | Review checklist and red flags |
workflows/debug-flex-distribution.md | Step-by-step workflow |
Derived from Math for Web Design by Paul McFedries, Chapter 5: Flexbox math.
Citations are tracked in references/source-map.md.
test cases passed, vs 20 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.