← 목차로

Step 2: flex-1과 flex-grow ↔️

남은 공간을 자동으로 채우는 유연한 레이아웃

1. flex-1: 남은 공간 채우기

특정 요소가 남은 공간을 모두 차지하게 할 수 있습니다.

❌ flex-1 없음

사이드바

메인

✅ 메인에 flex-1 (남은 공간 모두 차지)

사이드바

메인 (flex-1)

<div class="flex gap-4">
  <div class="w-48">사이드바</div>
  <div class="flex-1">메인 (남은 공간 모두 차지)</div>
</div>

2. 실전: 사이드바 + 메인 레이아웃

메뉴

🏠 홈
📊 대시보드
⚙️ 설정

메인 컨텐츠

flex-1로 남은 공간을 모두 채웁니다.

<div class="flex gap-4">
  <div class="w-64">사이드바</div>
  <div class="flex-1">메인</div>
</div>

3. 여러 요소에 flex-1 사용

여러 요소가 공간을 똑같이 나눠 가집니다.

1/3

<div class="flex gap-4">
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
</div>

4. 실전: 대시보드 통계 카드

총 방문자

12,345

신규 가입

234

매출

₩5.6M

<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[200px]">카드 1</div>
  <div class="flex-1 min-w-[200px]">카드 2</div>
  <div class="flex-1 min-w-[200px]">카드 3</div>
</div>

💡 핵심 정리

1. flex-1: 남은 공간을 모두 차지

2. 여러 개: 공간을 똑같이 나눔

3. min-w 조합: 최소 크기 보장하며 유연하게

4. 활용: 사이드바 레이아웃, 대시보드, 균등 분할

Step 3: 실전 반응형 레이아웃 →