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.
To get started with Yoga and Flexbox, consult the following external resources:
By default, all visual elements are part of the layout. The layout has the following default behaviours:
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.
The following list provides tips on how to use the layout engine:
height to define the size of an element.
flexGrow property (in USS:
flex-grow: <value>;) to assign a flexible size to an element. The value of the
flexGrow property acts as weighting when the size of an element is determined by its siblings.
flexDirection property to
row (in USS:
flex-direction: row;) to switch to a horizontal layout.
Use relative positioning to offset an element based on its original layout position.
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.