Layout
Flex
플렉스박스 레이아웃을 쉽게 구현할 수 있는 컨테이너 컴포넌트입니다. Box 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다.import { Flex } from '@vapor-ui/core';
export default function DefaultFlex() {
return (
<Flex gap="$200" padding="$300" backgroundColor="gray-100" borderRadius="$200">
<div
style={{
padding: '8px',
backgroundColor: '#3b82f6',
borderRadius: '4px',
color: 'white',
}}
>
Item 1
</div>
<div
style={{
padding: '8px',
backgroundColor: '#10b981',
borderRadius: '4px',
color: 'white',
}}
>
Item 2
</div>
<div
style={{
padding: '8px',
backgroundColor: '#f59e0b',
borderRadius: '4px',
color: 'white',
}}
>
Item 3
</div>
</Flex>
);
}Examples
Direction
플렉스 컨테이너의 주축 방향을 설정하여 항목들의 배치 방향을 제어할 수 있습니다.
import { Flex } from '@vapor-ui/core';
export default function FlexDirection() {
return (
<div className="flex flex-col gap-6">
<div>
<h4 className="mb-2 text-sm font-medium">Row (가로 방향)</h4>
<Flex
flexDirection="row"
gap="$200"
padding="$300"
backgroundColor="gray-100"
borderRadius="$200"
>
<div
style={{
padding: '8px',
backgroundColor: '#3b82f6',
borderRadius: '4px',
color: 'white',
}}
>
1
</div>
<div
style={{
padding: '8px',
backgroundColor: '#10b981',
borderRadius: '4px',
color: 'white',
}}
>
2
</div>
<div
style={{
padding: '8px',
backgroundColor: '#f59e0b',
borderRadius: '4px',
color: 'white',
}}
>
3
</div>
</Flex>
</div>
<div>
<h4 className="mb-2 text-sm font-medium">Column (세로 방향)</h4>
<Flex
flexDirection="column"
gap="$200"
padding="$300"
backgroundColor="gray-100"
borderRadius="$200"
>
<div
style={{
padding: '8px',
backgroundColor: '#3b82f6',
borderRadius: '4px',
color: 'white',
}}
>
1
</div>
<div
style={{
padding: '8px',
backgroundColor: '#10b981',
borderRadius: '4px',
color: 'white',
}}
>
2
</div>
<div
style={{
padding: '8px',
backgroundColor: '#f59e0b',
borderRadius: '4px',
color: 'white',
}}
>
3
</div>
</Flex>
</div>
<div>
<h4 className="mb-2 text-sm font-medium">Row Reverse (가로 역순)</h4>
<Flex
flexDirection="row-reverse"
gap="$200"
padding="$300"
backgroundColor="gray-100"
borderRadius="$200"
>
<div
style={{
padding: '8px',
backgroundColor: '#3b82f6',
borderRadius: '4px',
color: 'white',
}}
>
1
</div>
<div
style={{
padding: '8px',
backgroundColor: '#10b981',
borderRadius: '4px',
color: 'white',
}}
>
2
</div>
<div
style={{
padding: '8px',
backgroundColor: '#f59e0b',
borderRadius: '4px',
color: 'white',
}}
>
3
</div>
</Flex>
</div>
</div>
);
}Props Table
Flex 컴포넌트는 Box 컴포넌트를 확장하므로 Box의 모든 Sprinkles 속성을 상속받습니다. 추가로 플렉스 관련 기능을 제공합니다.
| Prop | Default | Type |
|---|---|---|
inline? | false | boolean |
flexDirection? | row | rowcolumnrow-reversecolumn-reverse |
justifyContent? | flex-start | flex-startcenterflex-endspace-betweenspace-aroundspace-evenly |
alignItems? | stretch | flex-startcenterflex-endstretchbaseline |
gap? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
padding? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
backgroundColor? | transparent | primarysecondarysuccesswarningdangerhintcontrastnormalnormal-100normal-200$blue-050$blue-100$blue-200$blue-300$blue-400$blue-500$blue-600$blue-700$blue-800$blue-900$gray-000$gray-050$gray-100$gray-200$gray-300$gray-400$gray-500$gray-600$gray-700$gray-800$gray-900$gray-950$green-050$green-100$green-200$green-300$green-400$green-500$green-600$green-700$green-800$green-900$orange-050$orange-100$orange-200$orange-300$orange-400$orange-500$orange-600$orange-700$orange-800$orange-900$black$white |
borderRadius? | $000 | $000$050$100$200$300$400$500$600$700$800$900 |