尺寸、空间和单位

Taffy 布局由可用空间加上尺寸约束驱动。理解这个模型可以使布局变得可预测。

可用空间

computeLayout 的第二个参数定义可用空间：

允许的值

• number: 绝对尺寸（通常是像素）
• "min-content": 最小内容尺寸
• "max-content": 最大内容尺寸
• "auto": 让布局决定

盒模型

Taffy 的行为类似于 box-sizing: border-box：

┌─────────────────────────┐
│  Margin                 │
│  ┌───────────────────┐  │
│  │ Border            │  │
│  │  ┌─────────────┐  │  │
│  │  │ Padding     │  │  │
│  │  │  Content    │  │  │
│  │  └─────────────┘  │  │
│  └───────────────────┘  │
└─────────────────────────┘

• size 包含 padding + border
• margin 是外部间距

百分比

百分比尺寸相对于父内容框：

常见陷阱

• 没有尺寸的根节点通常使子节点为 0
• Flex 中的 auto 表示内容尺寸
• max-content 触发测量回调

下一步

• 计算函数 (Measure Functions)
• 样式指南 (Styling Guide)