Flexbox 기본 개념 기초부터 실전까지! 반응형 레이아웃을 손쉽게 만드는 핵심 CSS

 

“왜 자꾸 한쪽으로 쏠리지…?”
“정렬만 잘 되면 끝인데, 진짜 어렵네…”

 

웹페이지 만들 때 정렬이 안 맞아서 멘붕 온 적, 한 번쯤 있으셨을 거예요.

이럴 때 CSS Flexbox를 알면, 레이아웃 스트레스에서 해방될 수 있어요.

오늘은 Flexbox의 핵심 속성부터 실전 예제, 반응형 대응까지 차근차근 정리해드릴게요!

 

Flexbox가 필요한 이유

웹사이트의 구조는 결국 “박스”의 나열이에요. 그걸 어떻게 정렬하느냐가 레이아웃의 전부죠.

기존에는 float, position, inline-block 등 다양한 방식이 있었지만,
유지보수도 어렵고 반응형 대응도 한계가 있었어요.

그래서 등장한 게 바로 Flexbox!
한마디로 말하자면...

“레이아웃 정렬을 위한 가장 간단하고 강력한 방법”

 

Flexbox 기초 문법 정리

Flexbox는 부모 요소에 display: flex를 선언하면서 시작됩니다.

.container {
  display: flex;
}

그다음부터는 아이템들을 어떻게 정렬할지 속성으로 지정해요.

 

핵심 속성만 딱 정리

• flex-direction: 주축 방향 설정 (row / column)
• justify-content: 주축 기준 정렬 (가로 방향)
• align-items: 교차축 기준 정렬 (세로 방향)
• flex-wrap: 줄바꿈 허용 여부
• gap: 아이템 간 간격
• flex-grow: 여유 공간을 얼마나 차지할지 비율로 설정

flex-grow는 동일한 줄에 여러 요소가 있을 때,
남는 공간을 각 요소가 얼마나 차지할지를 숫자로 지정하는 속성이에요.

.item {
  flex-grow: 1;
}

→ 이렇게 설정하면 해당 요소는 남는 공간을 균등하게 분배받아요.

.item-a {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2;
}

→ 이 경우 item-b는 item-a보다 2배 넓게 표시됩니다.

 

실전 예제: 카드형 리스트 만들기

<div class="card-container">
  <div class="card">카드1</div>
  <div class="card">카드2</div>
  <div class="card">카드3</div>
</div>

.card-container {
  display: flex;
  gap: 16px;
}

.card {
  width: 150px;
  height: 100px;
  background-color: #f2f2f2;
}

→ 이렇게 하면 카드들이 옆으로 나란히 정렬되고,
간격도 gap으로 깔끔하게 유지됩니다.

 

반응형으로 바꾸기: 줄바꿈 대응

작은 화면에선 가로 배치가 깨질 수 있죠.
이럴 땐 flex-wrap과 media query를 같이 써요.

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

→ 화면이 작아지면 자동으로 아래로 정렬되고,
한 줄에 하나씩 차지하게 됩니다.

 

정렬이 꼬일 때 꼭 확인하세요

• 부모 요소에 display: flex가 적용되어 있는지
• 부모의 width와 height 설정 여부
• 아이템에 flex-grow나 min-width 속성이 걸려 있는지

작은 실수 하나가 전체 정렬을 깨트릴 수 있어요!

 

마무리하며

Flexbox는 한 번 익혀두면
레이아웃 정리, 정렬, 반응형 대응까지 전천후로 활용할 수 있어요.

처음엔 용어들이 헷갈릴 수 있지만,
오늘 정리한 예제만 잘 기억해두면 실전에서 바로 써먹을 수 있습니다!

 

---

관련 콘텐츠 추천

반응형 웹사이트 만들기 기초부터 실전까지! 초보도 가능한 쉬운 방법

미디어 쿼리 Media Query 예제 모음집! 디바이스 해상도에 따른 반응형 웹 완성하는 핵심 코드 정리

CSS 말줄임 처리 3줄 코드로 끝내기! 한 줄 두 줄 말줄임까지 완벽 정리