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 の手引きとして、以下の外部リソースを参照してください。
デフォルトでは、すべてのビジュアル要素はレイアウトの一部です。レイアウトには以下のデフォルトの動作があります。
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 (絶対位置) に設定します。この場合、兄弟や親のレイアウトには影響しません。