# 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. 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.

- Skill: `thedixitjain/flexbox-math` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds add thedixitjain/flexbox-math`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thedixitjain/flexbox-math/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: thedixitjain (https://skillmd.com/u/thedixitjain)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/thedixitjain/flexbox-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

1. Read `guidelines.md` to select the smallest relevant file set.
2. Load `references/flex-distribution/rules.md` for implementation decisions.
3. Load `references/flex-distribution/examples.md` when editing code.
4. 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`.

---

**Source:** [`hashgraph-online/awesome-codex-plugins`](https://github.com/hashgraph-online/awesome-codex-plugins) → `plugins/LVTD-LLC/skills/skills/flexbox-math/SKILL.md`