Space

자식 요소 사이 간격을 일관되게 맞추는 flex 기반 레이아웃 유틸리티입니다. gap·방향·정렬·줄바꿈을 클래스로 조합합니다.

기본

space는 가로 inline-flex이며 기본 간격은 --space-gap (md)입니다.

항목 1

항목 2

항목 3

space_vertical로 세로 방향 배치를 지정합니다.

항목 1

항목 2

항목 3

space_gap-xs · space_gap-sm · space_gap-lg · space_gap-xl로 gap 크기를 변경합니다.

md (기본)

space_wrap과 space_block을 함께 사용하면 너비가 부족할 때 자식이 다음 줄로 넘어갑니다.

항목 1

항목 2

항목 3

항목 4

항목 5

space_align-* · space_justify-*로 교차축·주축 정렬을 지정합니다.

align center

높이 다름

align center

justify between

양 끝

버튼·구분선 등 실제 컴포넌트와 함께 사용하는 패턴입니다.

Prop	타입	기본값	설명
`vertical`	boolean	false	세로 방향 배치 (space_vertical)
`wrap`	boolean	false	줄바꿈 허용 (space_wrap)
`block`	boolean	false	부모 너비 100% flex (space_block)
`gap`	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	md	자식 간 간격. md는 클래스 없이 --space-gap 사용
`align`	'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'	—	교차축 정렬 (space_align-*)
`justify`	'start' \| 'center' \| 'end' \| 'between'	—	주축 정렬 (space_justify-*)

슬롯	설명
`default`	간격을 둘 자식 요소

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합하며, id · style · aria-* 등 전달 속성은 루트 요소에 적용됩니다.

클래스	설명
`space`	inline-flex 루트, 기본 가로 배치
`space_vertical`	세로 방향
`space_wrap`	줄바꿈
`space_block`	display flex + width 100%
`space_gap-xs · space_gap-sm · space_gap-lg · space_gap-xl`	간격 변형 (md는 기본)
`space_align-start · space_align-center · space_align-end · space_align-baseline · space_align-stretch`	교차축 정렬
`space_justify-start · space_justify-center · space_justify-end · space_justify-between`	주축 정렬

토큰	기본값	설명
`--space-gap`	var(--space-md)	기본 자식 간 간격 (gap md)