UIElements にはレイアウトエンジンが含まれており、レイアウトとスタイリングのプロパティーに基づいてビジュアル要素を配置します。レイアウトエンジンは、Flexbox のサブセットの HTML/CSS レイアウトシステムを実装する Yoga オープンソースプロジェクト です。
Yoga と Flexbox の手引きとして、以下の外部リソースを参照してください。
デフォルトでは、すべてのビジュアル要素はレイアウトの一部です。レイアウトには以下のデフォルトの動作があります。
UIElements には、ボタン、トグル、テキストフィールド、ラベルなどの標準 UI コントロール用の ビルトインコントロール が含まれます。これらのビルトインコントロールにはスタイルがあり、レイアウトに影響します。
以下は、レイアウトエンジンの使い方のヒントです。
width
と height
を設定して、要素のサイズを定義します。
flexGrow
プロパティー (USS: flex-grow: <value>;
) を使用して、要素に調整できるサイズを割り当てます。flexGrow
プロパティーの値は、要素のサイズがその兄弟によって決定されるときに、ウェイトとして機能します。
flexDirection
プロパティーを row
(USS: flex-direction: row;
) に設定すると、水平レイアウトに切り替えられます。
元のレイアウト位置に基づいて要素をオフセットするには、相対位置を使用します。
Set the position
property to absolute
to place an element relative to its parent position rectangle. In this case, it does not affect the layout of its siblings or parent.