← 전체 목록으로

Session 3: 반응형 Flex 레이아웃 📱💻

flex-wrap, flex-1, gap으로 화면 크기에 맞춰 자동으로 조절되는 레이아웃 만들기

⏱️ 2시간 🎯 flex-wrap, flex-1, gap, min-w, max-w

🎯 학습 목표

• flex-wrap으로 자동 줄바꿈 구현하기
• flex-1, flex-grow로 공간 채우기
• gap으로 간격 일관성 유지하기
• min-w, max-w로 최소/최대 너비 제어하기
• 복잡한 미디어쿼리 없이 반응형 만들기

📚 단계별 학습

Step 1

flex-wrap과 gap

자동 줄바꿈과 일관된 간격으로 반응형 그리드 만들기

⏱️ 40분 | 🎯 카드 그리드, 태그 목록

Step 2

flex-1과 flex-grow

남은 공간을 채우는 유연한 레이아웃

⏱️ 40분 | 🎯 사이드바, 대시보드

Step 3

실전 반응형 레이아웃

min-w, max-w 조합으로 완벽한 반응형

⏱️ 20분 | 🎯 종합 응용

연습문제

실습하기

배운 내용으로 다양한 반응형 레이아웃 만들기

⏱️ 20분 | 🎯 6개 문제

💡 핵심 개념

1. flex-wrap: 자동 줄바꿈

flex flex-wrap gap-4

공간이 부족하면 자동으로 다음 줄로 이동

2. gap: 일관된 간격


                gap-4 (1rem)

                gap-6 (1.5rem)

모든 자식 요소 사이에 동일한 간격

3. flex-1: 공간 채우기

flex-1 (flex: 1 1 0%)

남은 공간을 자동으로 채움

4. min-w / max-w: 크기 제한


                min-w-0 max-w-sm

                min-w-[200px]

최소/최대 너비로 범위 제어

🚀 실무에서 가장 많이 쓰는 패턴

1. 카드 그리드

flex flex-wrap gap-6

각 카드: min-w-[300px] flex-1

2. 사이드바 레이아웃

flex gap-4

사이드바: w-64 / 메인: flex-1

3. 버튼 그룹

flex flex-wrap gap-2

작은 화면에서 자동 줄바꿈