サイズ、スペース、単位

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

利用可能なスペース

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

Loading Preview…

許可される値

number: 絶対サイズ（通常はピクセル）
"min-content": 最小コンテンツサイズ
"max-content": 最大コンテンツサイズ

"auto" はスタイル寸法に使う値で、AvailableSpace では使えません。

ボックスモデル

boxSizing のデフォルトは BoxSizing.BorderBox で、スタイル寸法に padding と border が含まれます。BoxSizing.ContentBox ではスタイル寸法がコンテンツボックスを指定し、最終的な Layout.size は引き続きボーダーボックスのサイズになります：

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

計算結果の Layout.size には padding + border が含まれる
margin は外部スペーシング

パーセンテージ

パーセントサイズは、そのレイアウトで与えられる包含領域を基準に解決されます。通常フローでは親のコンテンツボックス、Grid アイテムでは配置先のグリッド領域、絶対配置では親の配置領域が基準になります。基準寸法が未確定の場合は、数値に解決できない段階もあります。次の例は通常の Flexbox の子です：