CSS Flexbox 완전 가이드: 2026년에 유연한 레이아웃 마스터하기

CSS Flexbox는 컨테이너 안에서 요소를 한 축 기준으로 정렬하고 공간을 분배하기 위한 레이아웃 모델입니다. 과거에는 float, table, absolute positioning 같은 우회 방법으로 처리하던 문제를 훨씬 깔끔하게 해결할 수 있습니다.

Flexbox는 수직 중앙 정렬, 균등 분배, 반응형 정렬, 구성 요소 내부 레이아웃 같은 실무 문제를 단순하게 만들어 주기 때문에 현대 프론트엔드에서 거의 필수입니다.

• 쉬운 중앙 정렬
• 유연한 확장과 축소
• 일관된 축 기반 정렬

읽으면서 직접 실험하려면 Flexbox playground를 열어 보세요.

Flexbox는 부모 요소에 display: flex를 주는 것에서 시작합니다. 그러면 직계 자식은 모두 flex item이 됩니다.

기본적으로 항목은 가로로 배치되고, 줄바꿈하지 않으며, 주축 시작점에 정렬되고, 교차축 방향으로는 늘어납니다.

값	주축	방향
row	가로	왼쪽에서 오른쪽
row-reverse	가로	오른쪽에서 왼쪽
column	세로	위에서 아래
column-reverse	세로	아래에서 위

flex-wrap은 줄바꿈 여부를 제어합니다. flex-flow를 쓰면 direction과 wrap을 한 번에 지정할 수 있습니다.

justify-content는 주축 방향 정렬, align-items는 교차축 방향 정렬을 담당합니다.

속성	역할
justify-content: center	주축 중앙 정렬
space-between	항목 사이 간격 균등 분배
align-items: center	교차축 중앙 정렬
align-items: stretch	교차축으로 늘리기

여러 줄이 생기면 align-content가 줄 간 배치를 제어합니다. 요소 사이 간격에는 gap이 가장 깔끔합니다.

각 요소가 공간을 어떻게 차지할지는 item 속성으로 결정됩니다.

• flex-grow: 남는 공간이 있을 때 얼마나 커질지
• flex-shrink: 공간이 부족할 때 얼마나 줄어들지
• flex-basis: 분배 전 기준 크기

flex는 세 값을 묶은 축약형입니다. flex: 1은 유연한 항목, flex: none은 고정 항목, flex: 0 0 250px은 250px 고정 항목을 의미합니다.

align-self는 개별 항목 정렬을 덮어쓰고, order는 HTML을 바꾸지 않고 시각적 순서만 바꿉니다.

Flexbox는 반복적으로 쓰이는 UI 패턴에 특히 강합니다.

• 완전 중앙 정렬: display: flex; justify-content: center; align-items: center;
• 네비게이션 바: justify-content: space-between으로 로고와 메뉴 분리
• Sticky footer: 세로 wrapper에 min-height: 100vh, main에 flex: 1
• 마지막 요소를 오른쪽으로: margin-left: auto
• 사이드바 + 본문: 사이드바는 고정, 본문은 유동

이 패턴들은 Flexbox playground에서 바로 시험해 볼 수 있습니다.

카드 리스트에서는 컨테이너에 display: flex; flex-wrap: wrap; gap: 24px;, 카드에 flex: 1 1 300px;를 주는 패턴이 자주 쓰입니다. 이렇게 하면 카드가 최소 너비를 유지하면서 화면 크기에 맞게 자동 정렬됩니다.

holy grail layout은 header, footer, 좌우 sidebar, main content를 갖는 전형적인 페이지 구조입니다. 바깥 wrapper를 세로 flex로 만들고, 가운데 영역을 다시 가로 flex로 구성하면 쉽게 만들 수 있습니다.

• 바깥 wrapper: display: flex; flex-direction: column; min-height: 100vh;
• 가운데 영역: display: flex; flex: 1;
• sidebar: flex: 0 0 200px;
• main content: flex: 1;

Flexbox는 1차원 레이아웃에 적합하고, CSS Grid는 행과 열을 동시에 제어하는 2차원 레이아웃에 더 적합합니다.

• Flexbox는 네비게이션 바, 카드, 폼, 버튼 그룹에 적합
• Grid는 페이지 전체 구조와 복잡한 그리드에 적합

항목	Flexbox	Grid
차원	1D	2D
강점	정렬과 공간 분배	구조 설계
주 용도	컴포넌트 내부	페이지 레이아웃

실무에서는 둘을 함께 쓰는 것이 가장 좋습니다. Flexbox playground와 CSS Grid generator에서 비교해 보세요.

Flexbox에서 자주 발생하는 실수는 다음과 같습니다.

• flex-shrink 기본값 1을 잊는 것
• flex-basis 대신 width만 사용하는 것
• 텍스트 잘림에 필요한 min-width: 0을 빼먹는 것
• 복잡한 2차원 그리드를 Flexbox만으로 만들려는 것

유용한 팁도 있습니다.

• margin-left: auto로 요소를 반대편 끝으로 밀 수 있다
• flex: 1 1 0%은 더 균등한 공간 배분에 유리하다
• 중첩된 flex container는 복잡한 UI에서 매우 유용하다
• order는 시각적 순서만 바꾸며 접근성 읽기 순서는 바꾸지 않는다

직접 확인하려면 interactive Flexbox playground를 활용하세요.