# Flex
URL: /react/components/layout/flex
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/(foundation)/layout/flex.mdx

Flex 컴포넌트는 flexbox를 사용하며 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

## Preview

```tsx
import { Flex } from "@seed-design/react";

export default function FlexPreview() {
  return (
    <Flex direction="row" bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
      <Flex
        direction="column"
        bg="bg.brandSolid"
        gap="x1_5"
        px="x2"
        py="x2"
        flexGrow={1}
        borderRadius="r2"
      >
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          1
        </Flex>
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          2
        </Flex>
      </Flex>
      <Flex
        direction="row"
        bg="bg.brandSolid"
        gap="x1_5"
        px="x2"
        py="x2"
        flexGrow={1}
        borderRadius="r2"
      >
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          3
        </Flex>
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          4
        </Flex>
      </Flex>
      <Flex bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        5
      </Flex>
    </Flex>
  );
}
```

## Props

## Responsive Design

<Card title="Responsive Design" href="/react/components/concepts/responsive-design">
  Flex의 레이아웃 프로퍼티에 반응형 값을 전달하여 viewport 크기에 따라 스타일을 조정할 수 있습니다.
</Card>