실전 예제 – Flexbox로 반응형 카드 UI 만들기

 

 

지금까지 Flexbox의 핵심 속성들을 하나씩 알아봤습니다.
이번엔 그 모든 걸 한 번에 실습해보는 카드 UI 예제로 정리해볼게요!

• display: flex
• flex-wrap
• gap
• flex-basis, flex-grow
• justify-content, align-items

전부 다 써보면서 유연하고 정돈된 레이아웃을 만들어봅니다.

---

 

✅ 완성될 레이아웃 미리 보기

• 화면이 넓을 땐 카드가 3개씩 가로 정렬
• 좁아지면 자동으로 줄바꿈 (flex-wrap)
• 카드 사이 간격은 gap으로 관리
• 각 카드는 일정한 크기로 나열되며, 여백에 따라 비율로 조정 (flex-basis, flex-grow)

---

 

🧱 HTML 구조

<div class="card-wrap">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
</div>

 

---

 

🎨 CSS 스타일

.card-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

.card {
  flex: 1 1 300px;
  background: #ffe4b5;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px #ccc;
  text-align: center;
}

 

---

 

🧠 속성별 체크포인트

속성	의미
flex-wrap: wrap	카드가 한 줄에 다 안 들어갈 때 줄바꿈
gap: 20px	카드 사이 간격 통일
flex: 1 1 300px	최소 300px, 여유 공간 있으면 더 커짐
justify-content: center	가운데 정렬
text-align: center	카드 안 텍스트 정렬

 

---

 

📱 반응형에서도 자연스럽게 작동

가로 폭이 좁아지면 자동으로 2열 → 1열로 정리됩니다.
미디어쿼리 없이도 유연한 레이아웃 완성!