Flex

Flex (플렉스 레이아웃)

Flex 컴포넌트는 flex 컨테이너 안에서 요소들을 배치하는 레이아웃 컴포넌트예요. 폴리모픽 컴포넌트이며 반응형 props를 지원해요.

출처: 문서

본문

Flex 컴포넌트로 flexbox 레이아웃을 쉽게 구성할 수 있어요. gap, justify, align, direction, wrap 등 flexbox 관련 속성을 prop으로 받아요.

import { Flex, Button } from '@mantine/core';

function Demo() {
  return (
    <Flex
      mih={50}
      bg="rgba(0, 0, 0, .3)"
      gap="md"
      justify="flex-start"
      align="flex-start"
      direction="row"
      wrap="wrap"
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

지원하는 props

Flex는 다음 props를 지원해요. 각 prop은 CSS 속성과 테마 키에 매핑돼요.

반응형 props

Flex 컴포넌트 props는 다른 style props와 마찬가지로 반응형 값을 가질 수 있어요.

import { Flex, Button } from '@mantine/core';

function Demo() {
  return (
    <Flex
      direction={{ base: 'column', sm: 'row' }}
      gap={{ base: 'sm', sm: 'lg' }}
      justify={{ sm: 'center' }}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

Group·Stack과의 차이

Flex 컴포넌트는 Group과 Stack의 대안이에요. Flex는 더 유연해서 가로·세로 flexbox 레이아웃을 모두 만들 수 있지만 더 많은 설정이 필요해요. Group이나 Stack과 달리 Flex는 폴리모픽이며 반응형 props를 지원해요.

브라우저 지원

Flex는 flexbox gap을 사용해 자식 사이의 간격을 만든다. 오래된 브라우저에서는 Flex 자식 사이의 간격이 적용되지 않을 수 있어요. PostCSS flex-gap-polyfill을 설치하면 오래된 브라우저 지원을 추가할 수 있어요.

더 알아보기 (Learn more)

• Group — 가로 배치 컴포넌트
• Stack — 세로 배치 컴포넌트
• style props — 스타일 prop 문서