| name | flexbox-math |
| description | 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. Use when flex items resize unexpectedly, when distributing free space along one axis, when comparing flexbox with grid, or when deriving predictable card, nav, toolbar, and row layouts. |
| license | MIT |
| compatibility | Codex, Claude Code, and other Agent Skills-compatible clients. |
| metadata | {"version":"0.1.0","displayName":"Flexbox Math","category":"Frontend","tags":"frontend,css,flexbox,layout,math"} |
Flexbox Math
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.
Quick Start
- Read
guidelines.md to select the smallest relevant file set.
- Load
references/flex-distribution/rules.md for implementation decisions.
- Load
references/flex-distribution/examples.md when editing code.
- Use
workflows/debug-flex-distribution.md for multi-step derivation or debugging.
Contents
| 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 |
Source
Derived from Math for Web Design by Paul McFedries, Chapter 5: Flexbox math.
Citations are tracked in references/source-map.md.
