UI 툴킷에는 레이아웃 및 스타일링 프로퍼티에 따라 시각적 요소를 배치하는 레이아웃 엔진이 포함되어 있습니다. 레이아웃 엔진은 Flexbox의 하위 집합, 즉 HTML/CSS 레이아웃 시스템을 구현하는 Yoga 오픈소스 프로젝트입니다.
Yoga와 Flexbox를 사용하려면 다음의 외부 리소스를 참조하십시오.
기본적으로 모든 시각적 요소는 레이아웃의 일부입니다. 레이아웃은 다음의 기본 동작을 포함합니다.
UI 툴킷은 스탠다드 UI 컨트롤(예: 버튼, 토글, 텍스트 필드, 레이블 등)을 위한 빌트인 컨트롤을 포함합니다. 이 빌트인 컨트롤에는 레이아웃에 영향을 주는 스타일이 있습니다.
다음 목록에서 레이아웃 엔진을 사용하는 방법에 대한 팁을 확인하십시오.
width와 height를 설정하여 요소의 크기를 정의하십시오.
flexGrow 프로퍼티(USS: flex-grow: <value>;)를 사용하여 요소에 유연한 크기를 할당하십시오. flexGrow 프로퍼티의 값은 요소의 크기가 해당 형제들에 의해 결정될 때 가중치 역할을 합니다.
flexDirection 프로퍼티를 row(USS: flex-direction: row;)로 설정하여 수평 레이아웃으로 전환하십시오.
상대 위치 지정을 사용하여 원본 레이아웃 포지션을 기준으로 요소를 오프셋하십시오.
position 프로퍼티를 absolute로 설정하여 부모 포지션 직사각형을 기준으로 요소를 배치하십시오. 이 경우에는 형제 또는 부모의 레이아웃에 영향을 주지 않습니다.