UI Toolkit includes a layout engine that positions visual elements based on layout and styling properties. The layout engine uses the layout principles of Yoga, which implements a subset of Flexbox, a HTML/CSS layout system.
To get started with Yoga and Flexbox, use the following external resources:
By default, all visual elements are part of the layout. The layout has the following default behaviours:
UI Toolkit includes built-in controls for standard UI components, such as a button, toggle, or text field. These built-in controls have styles that affect their layout.
The following list provides tips to help improve the performance of the layout engine:
height to define the size of an element.
flexGrow property (USS:
flex-grow: <value>;) to assign a flexible size to an element. The value of the
flexGrow property assigns a base weight to the size of an element when it’s determined by its siblings.
flexDirection property to
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. This doesn’t affect the layout of its siblings or parent.
The following example creates a UI element that is anchored to the lower left corner of the screen. This is achieved by creating a parent element that fills the entire screen, and then positioning a child element in its lower left corner.
flexGrowproperty to 1.
positionproperty on the element to
This is the resulting XML code:
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False"> <ui:VisualElement style="flex-grow: 1;"> <ui:VisualElement style="position: absolute; left: 0; bottom: 0;" /> </ui:VisualElement> </ui:UXML>