Theme PlaygroundBlocks
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

Loading component documentation...

Box

레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다.

Grid

유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다

On this page

Examples
Direction
Props Table
Flex