Version: 2020.3
시각적 트리

레이아웃 엔진

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:


기본적으로 모든 시각적 요소는 레이아웃의 일부입니다. 레이아웃은 다음의 기본 동작을 포함합니다.

  • 컨테이너가 자식을 수직으로 배포합니다.
  • 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:

  • widthheight를 설정하여 요소의 크기를 정의하십시오.

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

  • 상대 위치 지정을 사용하여 원본 레이아웃 포지션을 기준으로 요소를 오프셋하십시오.

  • 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;" />
시각적 트리
Copyright © 2023 Unity Technologies
优美缔软件(上海)有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。