Flexbox 실전 활용법 3가지 — 광고·본문·사이드바를 코드 한 줄로 정렬하는 법
"Flexbox" 속성 하나면 광고 영역, 본문, 사이드바를 한 줄로 나란히 정렬하는 게 진짜로 된다. 예전에 float: left, float: right 쓰다가 clearfix 빠트려서 레이아웃 다 무너진 경험이 있는 사람이라면, Flexbox가 얼마나 편한 도구인지 바로 체감할 거다. 건물로 치면 설계도 없이 벽돌 쌓던 걸 이제 레고 블록으로 바꾼 느낌이랄까.
📋목차
- Flexbox가 뭔지 딱 두 줄로 정리
- 광고 + 본문 + 사이드바 3단 레이아웃 만들기
- 주축과 교차축 — 헷갈리는 개념 한 번에 잡기
- 정렬 속성 핵심 5개만 외우면 된다
- 애드센스 광고 공간 Flexbox로 잡는 실전 코드
- 모바일에서 세로로 쌓이게 만드는 법
- Flexbox vs Grid — 언제 뭘 써야 하나
- 정리
📐 Flexbox가 뭔지 딱 두 줄로 정리
"Flexbox"는 Flexible Box Layout의 줄임말이다. 부모 요소에 display: flex 하나만 써도 자식 요소들이 자동으로 가로로 나열된다. 세로 정렬, 간격 균등 배분, 크기 비율 조정을 모두 CSS 몇 줄로 처리할 수 있다. 2019년 이후 IE 걱정만 없다면 실무에서 가장 쓰기 편한 레이아웃 도구다.
🏗️ 광고 + 본문 + 사이드바 3단 레이아웃 만들기
가장 많이 쓰이는 블로그 레이아웃 구조부터 바로 보자.
<div class="page-wrapper">
<aside class="ad-left">광고 영역</aside>
<main class="content">본문</main>
<aside class="sidebar">사이드바</aside>
</div>.page-wrapper {
display: flex;
gap: 24px;
align-items: flex-start;
}
.ad-left {
width: 160px;
flex-shrink: 0;
}
.content {
flex: 1;
}
.sidebar {
width: 300px;
flex-shrink: 0;
}flex: 1은 "남은 공간을 전부 가져가라"는 뜻이다. 광고와 사이드바는 너비를 고정하고 flex-shrink: 0으로 줄어들지 않게 막는다. 본문은 그 사이 공간을 알아서 채운다. 이게 "Flexbox" 레이아웃의 핵심 패턴이다.
↔️ 주축과 교차축 — 헷갈리는 개념 한 번에 잡기
Flexbox는 방향이 중요하다. flex-direction: row(기본값)면 가로가 주축, 세로가 교차축이다. flex-direction: column으로 바꾸면 세로가 주축이 된다.
justify-content는 주축 정렬, align-items는 교차축 정렬이다. 이 두 개만 확실히 알면 왜 내 의도대로 정렬이 안 되는지 헷갈리는 일이 확 줄어든다. 나도 이 개념 잡기 전까지 justify랑 align 계속 반대로 썼다.
🎯 정렬 속성 핵심 5개만 외우면 된다
아래 5개가 실무에서 90%를 차지한다.
justify-content: space-between— 양쪽 끝 붙이고 나머지 균등 배분justify-content: center— 가운데 정렬align-items: center— 교차축 기준 세로 가운데align-items: flex-start— 교차축 기준 위쪽 정렬 (사이드바 상단 고정에 필수)flex-wrap: wrap— 공간이 부족하면 자동으로 다음 줄로 넘김
특히 사이드바를 다룰 때 align-items: flex-start를 빠트리면 사이드바가 본문 높이에 맞춰 늘어난다. 광고 영역이 본문 길이만큼 쭉 늘어나는 이상한 현상이 바로 이 때문이다.
💡 애드센스 광고 공간 Flexbox로 잡는 실전 코드
애드센스 광고는 정해진 크기가 있어서 컨테이너 크기가 광고보다 작으면 잘린다. "Flexbox"로 공간을 먼저 확보해두면 이 문제를 방지할 수 있다.
.ad-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
width: 100%;
overflow: hidden;
}min-height로 최소 높이를 보장하면 광고 로딩 전에 레이아웃이 흔들리는 CLS(Cumulative Layout Shift) 문제도 줄어든다.
이건 애드센스 승인에도 영향을 주는 부분이라 챙겨야 한다.
📱 모바일에서 세로로 쌓이게 만드는 법
@media (max-width: 768px) {
.page-wrapper {
flex-direction: column;
}
.ad-left,
.sidebar {
width: 100%;
}
}flex-direction: column으로 바꾸는 것만으로 가로 3단 레이아웃이 세로 단일 컬럼으로 전환된다. 이게 "Flexbox" 반응형 처리의 가장 간단한 방법이다. 자식 요소 너비도 width: 100%로 풀어줘야 꽉 채워진다.
⚖️ Flexbox vs Grid — 언제 뭘 써야 하나
단순하게 정리하면: 한 줄(가로 또는 세로) 정렬은 Flexbox, 행과 열 동시 제어는 Grid다. 헤더 내비게이션, 버튼 그룹, 카드 한 줄 정렬은 Flexbox가 적합하다. 전체 페이지 레이아웃이나 카드 여러 줄 배열은 Grid가 더 적합하다. 현실에서는 둘을 혼합해서 쓰는 경우가 대부분이다. Grid로 전체 틀을 잡고, 각 컴포넌트 내부는 Flexbox로 정렬하는 방식이 가장 흔한 패턴이다.
✅ 정리
"Flexbox"는 한번 손에 익으면 다시는 float으로 돌아가고 싶지 않게 만드는 도구다. 광고 영역, 본문, 사이드바 3단 레이아웃도 결국 display: flex와 flex 비율 조정 몇 줄이면 해결된다. 모바일 대응도 flex-direction 하나로 처리되니 코드도 깔끔하다. 지금 당장 개발자 도구 열고 내 블로그 레이아웃 클래스에 display: flex 넣어보는 것부터 시작해봐라. 생각보다 훨씬 빠르게 감이 온다.
참고 자료 및 출처
- MDN Web Docs — Flexbox: https://developer.mozilla.org/ko/docs/Learn/CSS/CSS\_layout/Flexbox
- CSS-Tricks — A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Google AdSense Help — 광고 크기: https://support.google.com/adsense/answer/6002621