Flex

Flexbox 레이아웃을 위한 컴포넌트. Box를 확장하며 display: flex가 기본 적용됩니다.

개요

Flex는 Box를 확장한 컴포넌트로, display: flex가 기본으로 적용됩니다. Box의 모든 props를 그대로 사용할 수 있으며, inline prop으로 inline-flex로 전환할 수 있습니다.

방향, 정렬, 간격 등 flex 관련 속성은 $css prop으로 제어합니다. 더 구체적인 방향성이 있다면 HStack(가로), VStack(세로), Center(중앙)를 먼저 고려하세요.

언제 사용하나요

flexDirection을 직접 제어해야 하는 일반 flex 컨테이너가 필요할 때
반응형으로 row ↔ column 전환이 필요할 때
flexWrap, alignContent 등 고급 flex 속성이 필요할 때
인라인 레이아웃(inline-flex)이 필요할 때

언제 사용하면 안 되나요

항상 가로 배치 → HStack 사용
항상 세로 배치 → VStack 사용
가로세로 모두 중앙 정렬 → Center 사용
grid 레이아웃 → Grid 사용

접근성

render prop으로 시맨틱 HTML 요소를 렌더링하세요. Flex 컨테이너 자체는 시각적 레이아웃만 담당합니다. 목록을 렌더링한다면 render={<ul />}을 사용하고 자식에도 render={<li />}를 적용합니다.

Usage

가로 배치

기본 flexDirection은 row입니다. 자식 요소들이 가로로 나열됩니다.

<Flex $css={{ gap: '$spacing-300' }}>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">One</Typo></Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">Two</Typo></Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">Three</Typo></Box>
</Flex>

세로 배치

flexDirection: 'column'으로 자식 요소를 세로로 쌓습니다.

<Flex $css={{ flexDirection: 'column', gap: '$spacing-300' }}>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">One</Typo></Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">Two</Typo></Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">Three</Typo></Box>
</Flex>

양쪽 정렬 (space-between)

justifyContent: 'space-between'으로 양 끝에 요소를 배치합니다.

<Flex $css={{ justifyContent: 'space-between', padding: '$spacing-400', bgColor: '$background-2', rounded: '$radius-200' }}>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-1', rounded: '$radius-100' }}><Typo variant="$body-2">Left</Typo></Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$background-1', rounded: '$radius-100' }}><Typo variant="$body-2">Right</Typo></Box>
</Flex>

인라인 플렉스

inline prop을 전달하면 display: inline-flex로 렌더링됩니다. 텍스트 흐름 안에 flex 컨테이너를 넣을 때 유용합니다.

<Box $css={{ padding: '$spacing-400' }}>
<Typo variant="$body-2">텍스트 중간에{' '}
<Flex inline $css={{ gap: '$spacing-100', verticalAlign: 'middle' }}>
  <Box $css={{ padding: '$spacing-100', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">A</Typo></Box>
  <Box $css={{ padding: '$spacing-100', bgColor: '$background-2', rounded: '$radius-100' }}><Typo variant="$body-2">B</Typo></Box>
</Flex>
{' '}인라인으로 삽입</Typo>
</Box>

반응형 방향 전환

모바일에서 세로, 데스크톱에서 가로로 바뀌는 레이아웃입니다.

<Flex
$css={{
  flexDirection: { mobile: 'column', desktop: 'row' },
  gap: { mobile: '$spacing-200', desktop: '$spacing-400' },
  padding: '$spacing-400',
  bgColor: '$background-2',
  rounded: '$radius-200',
}}
>
<Box $css={{ padding: '$spacing-400', bgColor: '$background-1', rounded: '$radius-100', flexGrow: 1 }}>
  <Typo variant="$body-2">Main content</Typo>
</Box>
<Box $css={{ padding: '$spacing-400', bgColor: '$background-1', rounded: '$radius-100', width: { mobile: '100%', desktop: '200px' } }}>
  <Typo variant="$body-2">Sidebar</Typo>
</Box>
</Flex>

wrap

자식이 넘칠 때 다음 줄로 감쌉니다.

<Flex $css={{ flexWrap: 'wrap', gap: '$spacing-200', padding: '$spacing-400', bgColor: '$background-2', rounded: '$radius-200' }}>
{['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta', 'Theta'].map((name) => (
  <Box key={name} $css={{ padding: '$spacing-200', paddingX: '$spacing-300', bgColor: '$background-1', rounded: '$radius-100' }}>
    <Typo variant="$body-2">{name}</Typo>
  </Box>
))}
</Flex>

$css 커스텀

alignItems, justifyContent, gap 등을 조합해 원하는 레이아웃을 만듭니다.

<Flex
$css={{
  alignItems: 'center',
  justifyContent: 'center',
  gap: '$spacing-400',
  padding: '$spacing-600',
  bgColor: '$background-2',
  rounded: '$radius-300',
  height: '120px',
}}
>
<Box $css={{ width: '40px', height: '40px', bgColor: '$primary-5', rounded: '$radius-full' }} />
<Box $css={{ padding: '$spacing-200', bgColor: '$background-1', rounded: '$radius-100', flexGrow: 1 }}><Typo variant="$body-2">Centered content</Typo></Box>
<Box $css={{ width: '40px', height: '40px', bgColor: '$primary-5', rounded: '$radius-full' }} />
</Flex>

Props

Box의 모든 props를 상속합니다. $css 스타일 프롭 →

Prop

Type

Flex는 Box에 display: flex를 주입하는 방식으로 동작합니다. inline prop이 true이면 display: inline-flex를 적용합니다. 그 외 기본 스타일은 없으며, flexDirection, alignItems, justifyContent 등 모든 flex 속성은 $css prop으로 지정합니다.

상태	`display`
기본	`flex`
`inline`	`inline-flex`

On this page