플렉스

플렉스 (Flex)

블록 레벨 요소의 레이아웃을 유연하게 잡아 주는 컴포넌트예요. 요소 사이의 간격과 정렬을 손쉽게 제어하고 싶을 때 쓰면 좋아요.

출처: 문서

본문

언제 사용하나요 (When To Use)

• 요소 사이의 간격을 설정할 때 좋아요.
• 다양한 수평·수직 정렬을 지정할 때 적합해요.

Space 컴포넌트와의 차이 (Difference with Space component)

• Space는 인라인 요소 사이의 간격을 설정하는 용도예요. 각 자식 요소에 래퍼 요소를 추가해 인라인 정렬을 도와주며, 여러 자식 요소를 행·열로 등간격 배치할 때 적합해요.
• Flex는 블록 레벨 요소의 레이아웃을 설정하는 용도예요. 래퍼 요소를 추가하지 않으며, 자식 요소를 세로 또는 가로 방향으로 배치할 때 쓰이고 더 많은 유연성과 제어를 제공해요.

예시 (Examples)

기본 (Basic)

기본적인 사용법이에요.

/* eslint-disable react/no-array-index-key */
import React from 'react';
import { Flex, Radio } from 'antd';

const baseStyle: React.CSSProperties = {
  width: '25%',
  height: 54,
};

const App: React.FC = () => {
  const [value, setValue] = React.useState<string>('horizontal');
  return (
    <Flex gap="medium" vertical>
      <Radio.Group value={value} onChange={(e) => setValue(e.target.value)}>
        <Radio value="horizontal">horizontal</Radio>
        <Radio value="vertical">vertical</Radio>
      </Radio.Group>
      <Flex vertical={value === 'vertical'}>
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} style={{ ...baseStyle, backgroundColor: i % 2 ? '#1677ff' : '#1677ffbf' }} />
        ))}
      </Flex>
    </Flex>
  );
};

export default App;

align

정렬을 지정해요.

import React from 'react';
import { Button, Flex, Segmented } from 'antd';
import type { FlexProps } from 'antd';

const boxStyle: React.CSSProperties = {
  width: '100%',
  height: 120,
  borderRadius: 6,
  border: '1px solid #40a9ff',
};

const justifyOptions = [
  'flex-start',
  'center',
  'flex-end',
  'space-between',
  'space-around',
  'space-evenly',
];

const alignOptions = ['flex-start', 'center', 'flex-end'];

const App: React.FC = () => {
  const [justify, setJustify] = React.useState<FlexProps['justify']>(justifyOptions[0]);
  const [alignItems, setAlignItems] = React.useState<FlexProps['align']>(alignOptions[0]);
  return (
    <Flex gap="medium" align="start" vertical>
      <p>Select justify :</p>
      <Segmented options={justifyOptions} onChange={setJustify} />
      <p>Select align :</p>
      <Segmented options={alignOptions} onChange={setAlignItems} />
      <Flex style={boxStyle} justify={justify} align={alignItems}>
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
      </Flex>
    </Flex>
  );
};

export default App;

gap

요소 사이의 gap을 설정해요. 미리 정의된 크기로 small, medium, large 세 가지가 있으며, 직접 크기를 지정할 수도 있어요.

import React from 'react';
import { Button, Flex, Radio, Slider } from 'antd';
import type { FlexProps } from 'antd';

const App: React.FC = () => {
  const [gapSize, setGapSize] = React.useState<FlexProps['gap']>('small');
  const [customGapSize, setCustomGapSize] = React.useState<number>(0);
  return (
    <Flex gap="medium" vertical>
      <Radio.Group value={gapSize} onChange={(e) => setGapSize(e.target.value)}>
        {['small', 'medium', 'large', 'customize'].map((size) => (
          <Radio key={size} value={size}>
            {size}
          </Radio>
        ))}
      </Radio.Group>
      {gapSize === 'customize' && <Slider value={customGapSize} onChange={setCustomGapSize} />}
      <Flex gap={gapSize !== 'customize' ? gapSize : customGapSize}>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </Flex>
    </Flex>
  );
};

export default App;

자동 줄바꿈 (Wrap)

줄바꿈을 자동으로 처리해요.

import React from 'react';
import { Button, Flex } from 'antd';

const Demo: React.FC = () => (
  <Flex wrap gap="small">
    {Array.from({ length: 24 }, (_, i) => (
      <Button key={i} type="primary">
        Button
      </Button>
    ))}
  </Flex>
);

export default Demo;

조합 (combination)

중첩하면 더 복잡한 레이아웃도 만들 수 있어요.

import React from 'react';
import { Button, Card, Flex, Typography } from 'antd';

const cardStyle: React.CSSProperties = {
  width: 620,
};

const imgStyle: React.CSSProperties = {
  display: 'block',
  width: 273,
};

const App: React.FC = () => (
  <Card hoverable style={cardStyle} styles={{ body: { padding: 0, overflow: 'hidden' } }}>
    <Flex justify="space-between">
      <img
        draggable={false}
        alt="avatar"
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        style={imgStyle}
      />
      <Flex vertical align="flex-end" justify="space-between" style={{ padding: 32 }}>
        <Typography.Title level={3}>
          “antd is an enterprise-class UI design language and React UI library.”
        </Typography.Title>
        <Button type="primary" href="https://ant.design" target="_blank">
          Get Started
        </Button>
      </Flex>
    </Flex>
  </Card>
);

export default App;

API

이 컴포넌트는 [email protected]부터 사용할 수 있어요. Flex의 기본 동작은 가로 모드에서 위쪽 정렬이고, 세로 모드에서는 stretch 정렬이에요. 속성으로 조정할 수 있어요.

공통 props는 Common props를 참고해요.

디자인 토큰 (Design Token)

글로벌 토큰 (Global Token)

더 알아보기 (Learn more)

• Flex 컴포넌트 문서
• Space 컴포넌트와 비교하기
• Grid 레이아웃 살펴보기