Group 또는 Layout에 추가하는 하위 컴포넌트의 배치 방식을 설정합니다.
디스플레이를 설정할 컴포넌트를 선택합니다.
디스플레이를 활성화 합니다.
디스플레이 속성값을 설정합니다.
Flex방향이 Column이나 Column-Reverse로 설정된 경우 가로정렬과 세로정렬이 반대로 설정됩니다. 예를 들어 Column이 설정된 경우 가로정렬을 오른쪽으로 설정하면 하위 컴포넌트가 상위 컴포넌트의 상단부터 배치됩니다.
디스플레이를 Flex로 설정하면 Layout(레이아웃)에 하위 컴포넌트들이 Layout의 너비안에서 공간을 나눠 한줄로 배치됩니다.
이때 Flex방향을 변경하면 아래와 같이 배치됩니다. 방향을 Column으로 선택한 경우 상위 컴포넌트에 높이값을 설정하면 높이안에서 공간을 나눠 세로 배치됩니다.
Last updated
| 모양 | 기능 | 속성 | 의미 |
|---|---|---|---|
디스플레이
Stack UI
Group 또는 Layout에 하위 컴포넌트가 우측으로 차례로 추가되며, 컴포넌트의 너비보다 하위 컴포넌트의 합이 커지면 줄바꿈 되어 배치
Flex
Stack UI와 같이 하위 컴포넌트가 우측으로 쌓이고 줄바꿈되지 않고 한줄로 배치 Flex참고
Block
컴포넌트를 블록으로 만들고, 가로 너비는 상위 컴포넌트 너비만큼 차지하며, 세로는 내용에 따라 결정
None
컴포넌트를 화면에서 숨기고 공간도 차지하지 않음
Flex방향
Row
하위 컴포넌트가 왼쪽부터 가로로 정렬
Row-Reverse
하위 컴포넌트가 오른쪽부터 가로로 정렬
Column
하위 컴포넌트가 왼쪽부터 세로로 정렬
Column-Reverse
하위 컴포넌트가 오른쪽부터 세로로 정렬
가로정렬
왼쪽
하위 컴포넌트가 상위 컴포넌트의 좌측부터 배치
가운데
하위 컴포넌트가 상위 컴포넌트의 가운데를 기준으로 배치
오른쪽
하위 컴포넌트가 상위 컴포넌트의 오른쪽부터 배치
세로정렬
상단
하위 컴포넌트가 상위 컴포넌트의 상단부터 배치
중앙
하위 컴포넌트가 상위 컴포넌트의 중앙을 기준으로 배치
하단
하위 컴포넌트가 상위 컴포넌트의 하단부터 배치
FlexWrap
하위 컴포넌트의 너비 또는 높이의 합이 상위 컴포넌트보다 큰 경우 다음 라인에 배치
