スタイリング
Taffy のスタイリングプロパティに関する包括的なガイド。
Taffy のスタイリング API は CSS をモデルにしています。以下では、主なプロパティを分類して紹介します。
レイアウトモード
ノードの動作を定義するコアプロパティ。
| プロパティ | 説明 |
|---|---|
display | Flex（デフォルト）、Grid、Block、FlowRoot、None。 |
direction | Direction.Ltr / Direction.Rtl。 |
float / clear | ブロックレイアウトの浮動と回り込みの解除。 |
position | Relative（フロー）または Absolute（オーバーレイ）。 |
overflow | Visible、Clip、Hidden、Scroll。 |
inset | ポジショニング用の top、bottom、left、right。 |
サイズと間隔
寸法と間隔を制御します。
| プロパティ | 説明 |
|---|---|
size / minSize / maxSize | 幅と高さの制御。 |
aspectRatio | 幅と高さの比率。 |
margin | 外側の余白。 |
padding | 内側の余白。 |
border | 枠線の幅（スペースのみ）。 |
gap | Flex/Grid アイテム間の間隔。 |
Flexbox レイアウト
1D レイアウトのプロパティ。
| プロパティ | 説明 |
|---|---|
flexDirection | Row または Column の方向。 |
flexWrap | Wrap または NoWrap。 |
flexBasis | 初期メインサイズ。 |
flexGrow | 伸長係数。 |
flexShrink | 収縮係数。 |
justifyContent | メイン軸の整列。 |
alignItems | デフォルトのクロス軸の整列。 |
alignSelf | アイテムの整列オーバーライド。 |
alignContent | 折り返し行の整列。 |
Grid レイアウト
2D レイアウトのプロパティ。
| プロパティ | 説明 |
|---|---|
gridTemplateRows / gridTemplateColumns | 列と行を定義します。 |
gridColumn | 列方向へのアイテムの配置。 |
gridRow | 行方向へのアイテムの配置。 |
gridAutoFlow | 自動配置アルゴリズム。 |
gridTemplateAreas / gridTemplateAreaRowCount / gridTemplateAreaColumnCount | 名前付き領域とテンプレートの行列数。 |