Flexbox 레이아웃
완전 정복 가이드

Flexbox란 무엇인가요?

복잡한 float 없이 한 줄로 정렬을 완성하는 CSS 레이아웃 시스템

HTML 요소를 나란히 놓거나, 가운데 정렬하거나, 일정 간격으로 나누는 작업은 웹 개발에서 매일 하는 일이에요. 과거에는 float이나 inline-block으로 억지로 맞췄지만, Flexbox가 등장하면서 단 몇 줄의 CSS로 원하는 정렬을 만들 수 있게 됐어요.

Flexbox는 부모(Container)에 display: flex를 선언하면 활성화돼요. 그 순간 자식 요소(Item)들은 자동으로 가로로 나란히 줄을 서고, 부모의 속성에 따라 자유롭게 위치를 조정할 수 있어요.

꼭 알아야 할 Flexbox 속성 6가지

Container에 적용하는 속성들 — 이것만 알면 대부분의 레이아웃이 가능해요

자주 쓰는 Flexbox 패턴 3가지

복붙하면 바로 쓸 수 있는 실전 코드

① 완벽한 가운데 정렬

.center-box {
  display: flex;
  justify-content: center;   /* 가로 가운데 */
  align-items: center;      /* 세로 가운데 */
  height: 200px;
}

② 양쪽 끝 정렬 (헤더 레이아웃)

.header {
  display: flex;
  justify-content: space-between; /* 로고 왼쪽, 메뉴 오른쪽 */
  align-items: center;
  padding: 0 24px;
  height: 60px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px; /* 메뉴 간격 */
}

③ 반응형 카드 그리드

.card-container {
  display: flex;
  flex-wrap: wrap;  /* 넘치면 다음 줄로 */
  gap: 20px;
}

.card {
  flex: 1 1 280px; /* 최소 280px, 그 이상은 균등 분배 */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}

직접 조작해보는 Flexbox 데모

속성을 바꾸면 박스들이 실시간으로 움직여요

자주 묻는 질문

Flexbox를 쓰다 보면 꼭 만나는 문제들

이런 것도 배워봐요

Flexbox를 익혔다면 자연스럽게 이어지는 주제들