flexbox-math

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Flexbox Math

Flexbox 布局数学计算

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.

阅读
```
guidelines.md
```
以选择最小的相关文件集。
加载
```
references/flex-distribution/rules.md
```
获取实现决策相关内容。

编辑代码时加载

references/flex-distribution/examples.md

。

使用
```
workflows/debug-flex-distribution.md
```
进行多步骤推导或调试。

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

资源	用途
`guidelines.md`	将任务引导至对应的参考文件
`references/source-map.md`	书籍来源及章节/小节追溯
`references/flex-distribution/knowledge.md`	核心概念与术语
`references/flex-distribution/rules.md`	实用规则、指南及例外情况
`references/flex-distribution/examples.md`	错误/正确示例及重构方法
`references/flex-distribution/patterns.md`	可复用公式与实现模式
`references/flex-distribution/checklist.md`	审核清单与警示信号
`workflows/debug-flex-distribution.md`	分步工作流程

Source

来源

Derived from Math for Web Design by Paul McFedries, Chapter 5: Flexbox math. Citations are tracked in

references/source-map.md

源自Paul McFedries所著《Math for Web Design》第5章：Flexbox数学计算。引用信息记录在

references/source-map.md

中。