배치

Group에 추가하는 하위 컴포넌트의 배치 방식을 설정합니다.

사용방법

1. 배치를 설정할 그룹을 선택합니다.

2. 배치를 활성화 합니다.

3. 배치 속성값을 설정합니다.

기능설명

아이콘	설정 항목	적용 속성	동작 설명
	배치 사용		Flex 레이아웃 기반으로 구성 Flex참고
	레이아웃 숨기기	display: none	컴포넌트를 화면에서 숨기고 공간도 차지하지 않음
	가로 방향 정렬	flex-direction: row	하위 컴포넌트가 왼쪽부터 가로로 정렬
	가로 방향 정렬	flex-direction: column	하위 컴포넌트가 오른쪽부터 세로로 정렬
	줄바꿈 사용	flex-wrap: wrap flex-direction: row	하위 컴포넌트의 너비 또는 높이의 합이 상위 컴포넌트보다 큰 경우 다음 라인에 배치
	가로 간격 설정	column-gap	하위 컴포넌트 사이의 가로 간격을 설정합니다.
	세로 간격 설정	row-gap	하위 컴포넌트 사이의 세로 간격을 설정합니다.
	정렬 옵션	align-items, justify-content	하위 컴포넌트를 시작, 중앙, 끝 등 위치에 맞게 정렬합니다. 방향 설정(row/column)에 따라 기준이 달라집니다.
	공간 나눠 배치	justify-content: space-between	하위 컴포넌트 사이에 동일한 간격을 두고 양 끝에 배치합니다. 정렬 옵션 더블 클릭 시 적용됩니다.

결과예시

예시) 배치를 설정한 경우

배치를 설정하면 Group에 하위 컴포넌트들이 Group의 너비안에서 공간을 나눠 한줄로 배치됩니다.

배치 속성 적용전

배치 적용후

이때 방향을 변경하면 아래와 같이 배치됩니다. 방향을 Column으로 선택한 경우 상위 컴포넌트에 높이값을 설정하면 높이안에서 공간을 나눠 세로 배치됩니다.

방향을 row로 적용 후

방향을 column으로 적용 후