sidebar_position: 4

サイズ、スペース、単位

Taffy レイアウトは利用可能なスペースとサイズ制約で駆動されます。このモデルを理解することで、レイアウトを予測可能にします。

利用可能なスペース

computeLayout の 2 番目の引数が利用可能なスペースを定義します：

許可される値

• 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)