Flex

Flexbox 레이아웃을 위한 컴포넌트. Box를 확장하며 display가 flex로 설정됩니다.

개요

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

Usage

가로 배치

import { Flex, Box } from '@featuring-corp/components';

<Flex $css={{ gap: '$spacing-300' }}>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>One</Box>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>Two</Box>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>Three</Box>
</Flex>

세로 배치

import { Flex, Box } from '@featuring-corp/components';

<Flex $css={{ flexDirection: 'column', gap: '$spacing-300' }}>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>One</Box>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>Two</Box>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>Three</Box>
</Flex>

양쪽 정렬

import { Flex, Box } from '@featuring-corp/components';

<Flex $css={{ justifyContent: 'space-between', width: '400px' }}>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>Left</Box>
  <Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>Right</Box>
</Flex>

인라인 플렉스

import { Flex } from '@featuring-corp/components';

<Flex inline $css={{ gap: '$spacing-200' }}>
  <span>Inline</span>
  <span>Flex</span>
</Flex>

Props

Box의 모든 Props를 상속합니다.

Prop

Type