← 목차로

Step 1: flex-wrap과 gap 🔄

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

1. gap: 일관된 간격

margin 없이 간격을 일관되게 유지할 수 있습니다.

❌ gap 없음 (간격 없음)

Box 1

Box 2

Box 3

✅ gap-4 사용

Box 1

Box 2

Box 3

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

공간이 부족하면 자동으로 다음 줄로 이동합니다. 창 크기를 조절해보세요!

✅ flex-wrap 사용 (창 크기 조절 시 자동 줄바꿈)

카드 1

카드 2

카드 3

카드 4

카드 5

<div class="flex flex-wrap gap-4">
  <div class="w-48">카드 1</div>
  <div class="w-48">카드 2</div>
  <!-- 공간이 부족하면 자동으로 다음 줄로 -->
</div>

반응형 카드 그리드를 쉽게 만들 수 있습니다.

💻

고성능 개발 노트북

₩1,200,000

🎧

노이즈 캔슬링

₩350,000

⌚

건강 관리

₩450,000

📱

최신 플래그십

₩1,500,000

<div class="flex flex-wrap gap-6">
  <div class="w-64">카드 1</div>
  <div class="w-64">카드 2</div>
  <!-- 화면 크기에 따라 자동 배치 -->
</div>

가장 자주 쓰는 패턴 중 하나입니다.

JavaScript React TypeScript Node.js Tailwind CSS Next.js PostgreSQL

<div class="flex flex-wrap gap-2">
  <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full">태그</span>
  <!-- 자동 줄바꿈 -->
</div>

1. gap: 모든 자식 요소 사이에 동일한 간격

2. flex-wrap: 공간 부족 시 자동 줄바꿈

3. 조합: flex flex-wrap gap-6 (가장 많이 씀!)

4. 활용: 카드 그리드, 태그 목록, 버튼 그룹