CSS Flexbox | 플렉스박스 레이아웃 완벽 가이드

Flexbox? 그냥 부모에 display: flex 박고 시작하면 돼. 예전엔 float로 33.333% 맞추고 클리어픽스 징글징글했는데, 이제는 아래 정도면 한 줄 흐름 잡는 건 끝이야.

/* 옛날 느낌으로만 */
.item {
  float: left;
  width: 33.333%;
}

.container {
  display: flex;
  gap: 1rem;
}
.item {
  flex: 1;
}

솔직히 난 네비나 툴바 줄 만들 때 justify-content: space-between이 거의 답이라고 본다. 양끝 붙이고 가운데 비우는 그림 — 로고 / 메뉴 / 액션이 흩어져 보이게. space-around랑 space-evenly는 이름만 예쁘지, 레이아웃 맞출 때 “이거맞나?” 싶은 경우가 잦아. 난 그냥 space-between + gap 조합이 제일 덜 삐걱거려.

flex-direction은 row가 기본이고, column이면 위에서 아래로 쌓이고, row-reverse·column-reverse는 눈에 보이는 순서만 뒤집는다. 키보드 탭 순서는 DOM 그대로라서, 역순 쓰면 “화면엔 B가 먼저인데 포커스는 A” 같은 꼴이 나올 수 있어. 그냥 reverse 말고 구조·order까지 같이 생각해라.

flex-wrap은 nowrap이 기본이라 한 줄에 우겨 넣다가 넘치거나 flex-shrink에 맡기거나 한다. wrap 쓰면 좁아질 때 다음 줄로 넘어가고, wrap-reverse는 줄 쌓이는 방향이 반대로 가는 케이스. 카드 늘어트릴 땐 wrap + gap + flex: 1 1 280px 느낌이 익숙할 거야.

flex-flow는 direction이랑 wrap을 한 방에 쓰는 것뿐이야. flex-flow: row wrap 한 줄 쓰든 둘로 쪼개 쓰든 팀이 편한 쪽으로.

주축 정렬이 justify-content고, 나는 위에서 말한 대로 실무에선 space-between이 제일 자주 나간다고 봄. flex-start·flex-end·center는 당연히 쓰고, space-between이랑 align-items: center만으로 네비 한 줄이 거의 끝나. 예시는 이런 식.

.navbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

align-items는 한 줄 안에서 교차축으로 어떻게 맞출지. 기본은 stretch고, 아이콘이랑 텍스트 한 줄에 맞출 땐 center가 제일 많이 나와. baseline은 텍스트 베이스 맞출 때.

align-content는 flex-wrap: wrap이고 줄이 둘 이상일 때만 의미 있어. 한 줄이면 거의 체감이 없다. 여러 줄 “덩어리”를 교차축에서 어디에 둘지 — align-items가 “한 줄 안”, align-content가 “여러 줄 묶음”이라고만 기억해도 됨.

아이템 쪽은 flex-grow / shrink / basis가 핵심이고, 대부분은 flex 단축으로 끝내. flex-grow 0이면 남는 공간 안 먹고, 1이면 나눠 가짐. 여러 개면 숫자 비율로 갈라 먹는다. flex-shrink는 1이 기본(줄어들 수 있음)이고, 아이콘 열같이 안 줄이고 싶으면 0. 텍스트 열이랑 같이 쓸 땐 min-width: 0 꼭 같이 얹어라, 안 그러면 텍스트가 “최소 너비” 잡고 안 줄어드는 팀 있음.

flex-basis는 남는 공간 나누기 전 기준 크기. flex: 1은 보통 1 1 0% 쪽에 가깝게 동작해서 남는 걸 쓱 가져가고, flex: 0 0 200px는 200px 박스로 고정 느낌. flex: auto는 1 1 auto라 콘텐츠/width 쪽 봄. 헷갈리면 “완전 고정이면 0 0 Npx로 박자” — 이렇게 하면 마음이 편해.

align-self는 그 아이템만 align-items 덮어쓰기, order는 같은 컨테이너 안에서 눈에 보이는 순서 꼬기. order는 네비·폼에서 남용하면 a11y 망가지니까 조심.

IE11에서 flex 버그 — 나 진짜 여기서 시간 많이 썼어. 2026에 IE 얘기? 구 레거시 붙잡을 때는 아직 나온다. IE11 flex 컨테이너 직계 자식에 min-height % 넣으면 기대랑 다르게 터지는 경우, flex-basis: auto랑 width가 같이 있을 때 계산이 꼬이는 경우, align-items: center + 중첩 flex에서 세로 잘리는 느낌, flex: 1이 0% basis 해석 꼬이는 쪽… 그래서 “IE만 지원”이면 -ms- 접두어 시절 기억이랑 flex-shrink 0/1에 따라 느낌이 달라지는 것까지 염두에 둬야 했지. 다행히 신규는 Chromium 기준이라 그 지옥은 이제 Autoprefixer + browserslist 쪽이 대신 처리해주고, IE는 문서/내부툴 아니면 안 본다고 생각해도 돼. 그때는 최후의 수단으로 float 레이아웃으로 빼는 팀도 있었음. 웃기지? flex 쓰다가 IE만 깨지면 float로…

gap 쓰라. margin + :last-child 지우는 것보다 뇌절이 적다. gap이랑 margin 둘 다 쓰면 간격 이중으로 벌어지니까 하나로 통일.

실전 패턴만 훑으면, 네비는 space-between + 중첩 flex + gap. 카드 리스트는 wrap + flex: 1 1 280px + 카드 안은 column flex에 본문 flex: 1 푸터 아래로 붙이기. 화면 가운데 박스는 justify-content: center + align-items: center + min-height: 100vh 클래식. Sticky footer는 body column flex, main에 flex: 1 — 이건 아직도 잘 씀. Holy Grail 느낌이면 body column, 안쪽에 flex row에 사이드 0 0 220px, 메인 flex: 1 + 메인엔 min-width: 0 (긴 pre/테이블 있을 때 가로 터지는 거 막기).

반응형은 모바일에서 column 기본 두고 min-width 넘으면 row로 꺾는 식이 DOM 순서 유지하기 편하다. 2차원 격자가 진짜 필요하면 Grid를 가져가는 게 맞는 경우가 많고, flex wrap으로 카드 붙이다 마지막 줄 간격 꼬이면 grid의 auto-fill / minmax 쪽이 한결 낫다는 말도 자주 하게 됨. 표로 비교 안 할게 — flex는 한 방향 흐름에 강하고, grid는 행+열 동시에 박는 쪽. 그 이상은 케이스 봐서 고르면 돼.

많이 밟는 함정: 텍스트가 안 줄어들면 min-width: 0. 긴 URL은 overflow-wrap: anywhere 같은 것도 같이. space-between인데 줄 여러 갈래면 마지막 줄에 아이템 적을 때 간격 이상해 보이면 — 그건 grid로 바꾸거나 스페이서 넣는 수밖에. 중첩 flex에서 height: 100%만 늘려대면 부모 높이 애매할 때 망하니까 flex: 1 + min-height: 0 쪽이 안정적이다.

최적화? 레이아웃 속성 막 애니메이션하기보다 transform 쪽. 디버깅은 DevTools flex 오버레이로 주축 화살표 보면 justify랑 align 헷갈림이 줄어듦.

속성 훑기: 컨테이너는 display / flex-direction / flex-wrap / flex-flow / justify-content / align-items / align-content / gap. 아이템은 flex랑 flex-grow·shrink·basis / align-self / order. 이 정도면 치트시트 표 없이도 머릿속에 정리돼.

다른 글은 박스 모델, Grid, 시리즈 intro 정도. 더 깊게 보면 CSS Flexbox 완벽 가이드도 같이 보면 됨. 배포 전엔 git add → commit → push → npm run deploy (프로젝트에 맞게) 돌리고.

검색 키워드: CSS, Flexbox, 레이아웃, justify-content, align-items, flex-wrap, flex-grow — 대충 이 조합.