Space
자식 요소 사이의 간격과 배치를 관리하는 React 레이아웃 컴포넌트입니다. gap·방향·정렬·줄바꿈을 props와 유틸리티 클래스로 조합합니다.
기본
기본 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 크기를 변경합니다.
xs
xs
xs
sm
sm
sm
md (기본)
md
md
lg
lg
lg
xl
xl
xl
줄바꿈
block으로 사용 가능한 너비를 확보하고 wrap을 적용하면 자식이 다음 줄로 넘어갑니다.
항목 1
항목 2
항목 3
항목 4
항목 5
정렬
align은 교차축, justify는 주축 정렬을 지정합니다. 기본값은 각각 center와 start입니다.
align center
높이 다름
align center
justify between
양 끝
조합 예시
버튼·구분선 등 실제 컴포넌트와 함께 사용하는 패턴입니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
vertical | boolean | false | 세로 방향 배치 (space_vertical) |
wrap | boolean | false | 줄바꿈 허용 (space_wrap) |
block | boolean | false | 루트를 display: flex와 width: 100%로 변경 (space_block) |
gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md | 자식 간 간격. md는 클래스 없이 --space-gap 사용 |
align | 'start' | 'center' | 'end' | 'baseline' | 'stretch' | center | 교차축 정렬 (space_align-*) |
justify | 'start' | 'center' | 'end' | 'between' | start | 주축 정렬 (space_justify-*) |
API · Children
| Children | 설명 |
|---|---|
children | 간격과 정렬을 적용할 ReactNode 자식 요소 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
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) |