react에서 flex가 뜻하는 바는?

React에서 "flex"는 주로 CSS의 Flexbox(Flexible Box Layout)를 의미합니다.

CSS Flexbox의 핵심 개념

Flex는 컨테이너 내의 아이템들을 유연하게 배치하고 정렬할 수 있게 해주는 CSS 레이아웃 모델입니다.

기본 사용법

 

jsx

// React 컴포넌트에서 인라인 스타일 사용
function MyComponent() {
  return (
    <div style={{ display: 'flex' }}>
      <div>아이템 1</div>
      <div>아이템 2</div>
      <div>아이템 3</div>
    </div>
  );
}

// CSS 클래스 사용
function MyComponent() {
  return (
    <div className="flex-container">
      <div>아이템 1</div>
      <div>아이템 2</div>
    </div>
  );
}

주요 Flex 속성들

컨테이너(부모) 속성:

• display: flex - 플렉스 컨테이너 생성
• flex-direction - 정렬 방향 (row, column 등)
• justify-content - 메인 축 정렬 (center, space-between 등)
• align-items - 교차 축 정렬 (center, flex-start 등)

아이템(자식) 속성:

• flex: 1 - 남은 공간을 균등하게 차지
• flex-grow - 확장 비율
• flex-shrink - 축소 비율

실제 활용 예시

 

jsx

// 헤더 레이아웃
function Header() {
  return (
    <header style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '1rem'
    }}>
      <div>로고</div>
      <nav>메뉴</nav>
      <div>로그인</div>
    </header>
  );
}

// 카드 그리드
function CardGrid() {
  return (
    <div style={{
      display: 'flex',
      flexWrap: 'wrap',
      gap: '1rem'
    }}>
      <div style={{ flex: '1 1 300px' }}>카드 1</div>
      <div style={{ flex: '1 1 300px' }}>카드 2</div>
      <div style={{ flex: '1 1 300px' }}>카드 3</div>
    </div>
  );
}

React에서 flex는 반응형 레이아웃을 쉽게 만들고, 요소들을 직관적으로 정렬할 수 있게 해주는 매우 유용한 도구입니다.