レイアウトエンジン

UI Toolkit includes a layout engine that positions visual elements based on layout and styling properties. The layout engine is the Yoga open source project that implements a subset of Flexbox: a HTML/CSS layout system.

Yoga と Flexbox の手引きとして、以下の外部リソースを参照してください。

• Yoga 公式ドキュメント: プロパティは、ほぼ一致しています。
• CSS-Tricks guide to Flexbox: 若干の違いがありますが、ほとんどのプロパティはサポートされています。

デフォルトでは、すべてのビジュアル要素はレイアウトの一部です。レイアウトには以下のデフォルトの動作があります。

• コンテナは子を垂直に配置します。
• コンテナ矩形の位置に子の矩形が含まれます。この動作は他のレイアウトプロパティによって制限される場合があります。
• テキストを含むビジュアル要素は、サイズ計算でテキストサイズを使用します。この動作は他のレイアウトプロパティによって制限される場合があります。

UI Toolkit include built-in controls for standard UI controls such as button, toggle, text field, or label. These built-in controls have styles that affect their layout.

以下は、レイアウトエンジンの使い方のヒントです。

• width と height を設定して、要素のサイズを定義します。

• flexGrow プロパティ (USS: flex-grow: <value>;) を使用して、要素に調整できるサイズを割り当てます。flexGrow プロパティの値は、要素のサイズがその兄弟によって決定されるときに、ウェイトとして機能します。

• flexDirection プロパティを row (USS: flex-direction: row;) に設定すると、水平レイアウトに切り替えられます。

• 元のレイアウト位置に基づいて要素をオフセットするには、相対位置を使用します。

• 要素を親位置の矩形に対して相対的に配置するには、position プロパティを absolute (絶対位置) に設定します。この場合、兄弟や親のレイアウトには影響しません。

• 2018–11–02 修正されたページ