Flex

CSS Flexbox를 사용하여 자식 컴포넌트들을 유연하게 배열하는 레이아웃 컴포넌트입니다.

import { Flex } from 'layout-component-hp';

Anatomy

• Flex: CSS Flexbox를 사용해 자식 요소의 레이아웃을 제어하는 부모 컨테이너입니다.
• Flex.Item: Flex 컴포넌트의 자식 요소입니다.

Usage for Flex

Flex 컴포넌트의 사용법은 다음과 같습니다.

결과

Loading...

라이브 에디터

<Flex gap={10}> <Flex.Item> <DecorativeBox /> </Flex.Item> <Flex.Item> <DecorativeBox /> </Flex.Item> <Flex.Item> <DecorativeBox /> </Flex.Item> </Flex>

<Flex gap={10}>
  <Flex.Item>
    <DecorativeBox />
  </Flex.Item>
  <Flex.Item>
    <DecorativeBox />
  </Flex.Item>
  <Flex.Item>
    <DecorativeBox />
  </Flex.Item>
</Flex>

Usage for Flex.Item

Flex.Item 컴포넌트의 사용법은 다음과 같습니다.

결과

Loading...

라이브 에디터

<Flex gap={10}> <Flex.Item grow={1}> <DecorativeBox /> </Flex.Item> <Flex.Item grow={2}> <DecorativeBox /> </Flex.Item> <Flex.Item> <DecorativeBox /> </Flex.Item> </Flex>

<Flex gap={10}>
  <Flex.Item grow={1}>
    <DecorativeBox />
  </Flex.Item>
  <Flex.Item grow={2}>
    <DecorativeBox />
  </Flex.Item>
  <Flex.Item>
    <DecorativeBox />
  </Flex.Item>
</Flex>

결과

Loading...

라이브 에디터

<Flex gap={10}> <Flex.Item order={2}> <DecorativeBox>1</DecorativeBox> </Flex.Item> <Flex.Item order={3}> <DecorativeBox>2</DecorativeBox> </Flex.Item> <Flex.Item order={1}> <DecorativeBox>3</DecorativeBox> </Flex.Item> </Flex>

<Flex gap={10}>
  <Flex.Item order={2}>
    <DecorativeBox>1</DecorativeBox>
  </Flex.Item>
  <Flex.Item order={3}>
    <DecorativeBox>2</DecorativeBox>
  </Flex.Item>
  <Flex.Item order={1}>
    <DecorativeBox>3</DecorativeBox>
  </Flex.Item>
</Flex>