Version: 2020.3
Language : English
The Visual Tree
The UXML format

The Layout Engine

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:

  • A container distributes its children vertically.
  • The position of a container rectangle includes its children rectangles. This behavior can be limited by other layout properties.
  • A visual element with text uses the text size in its size calculations. This behavior can be limited by other layout properties.

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.

Best practices

The following list provides tips to help improve the performance of the layout engine:

  • Set the width and height to define the size of an element.

  • Use the 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.

  • Set the flexDirection property to row (USS: flex-direction: row;) to switch to a horizontal layout.

  • Use relative positioning to offset an element based on its original layout position.

  • Set the 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.

  1. Create a new VisualElement
  2. Set the flexGrow property to 1.
  3. Create a new VisualElement and make it a child of the first one
  4. Set the position property on the element to absolute
  5. Set the position offset for left and bottom to 0
Anchoring Example
Anchoring Example

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;" />
The Visual Tree
The UXML format