Version: 2020.1
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 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:

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

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:

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

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

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

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


  • 2018–11–02 Page amended
The Visual Tree
The UXML format