mcpField
F
flexbox-math

flexbox-math

github.com/lvtd-llc设计与 UI142 次安装7 周前更新
代码仓库

关于 flexbox-math

面向处理单维布局的开发者，讲解 Flexbox 尺寸分配背后的计算。内容涵盖基础尺寸、剩余空间、增长与收缩分配及约束钳制，并提供规则、示例和调试流程。

主要功能

  1. 01Flexbox 分配概念
  2. 02规则与实现例外
  3. 03代码示例
  4. 04可复用公式模式
  5. 05分步调试工作流

适用场景

  1. 01计算 Flexbox 布局的剩余空间
  2. 02排查增长或收缩分配
  3. 03检查尺寸约束与钳制

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lvtd-llc/skills --skill flexbox-math

安装后在 Claude Code 中输入/flexbox-math确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

guidelines.md
agents/
openai.yaml
references/
source-map.md
references/flex-distribution/
checklist.md
examples.md
knowledge.md
patterns.md
rules.md
workflows/
debug-flex-distribution.md

详细介绍

Flexbox 数学

使用此技能进行一维布局分配。重点介绍决定基准尺寸、剩余空间、增长分配、收缩分配和约束钳制的计算。

快速入门

  1. 阅读 guidelines.md，选择最精简的相关文件集。
  2. 加载 references/flex-distribution/rules.md，用于实现决策。
  3. 编辑代码时，加载 references/flex-distribution/examples.md。
  4. 对于多步骤推导或调试，请使用 workflows/debug-flex-distribution.md。

目录

资源用途
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分步工作流

来源

根据 Paul McFedries 的 Math for Web Design 第 5 章：Flexbox 数学改编。 引用信息记录在 references/source-map.md 中。

评论

支持 Markdown