Flexbox 개요
Flexbox는 가로 행 또는 세로 열의 한 방향으로 아이템을 나열하는 1차원 레이아웃 시스템입니다.
| 구성 요소 | 역할 | CSS |
|---|---|---|
| flex container | 플렉스 컨테이너 — 부모 요소 | display: flex |
| flex item | 플렉스 아이템 — 자식 요소 | 자동으로 아이템이 됨 |
/* HTML */
<div class="container">
<div class="item"><p>설명1</p></div>
<div class="item"><p>설명2</p></div>
<div class="item"><p>설명3</p></div>
</div>
/* CSS */
.container {
display: flex;
flex-direction: row;
}
.item {
flex: 1;
padding: 30px;
}
컨테이너 속성
부모 요소(컨테이너)에 지정하는 속성입니다.
| 속성 | 역할 | 주요 값 |
|---|---|---|
flex-direction |
배치 방향 | row(가로, 기본) / column(세로) |
flex-wrap |
줄넘김 처리 | nowrap(기본, 한줄) / wrap(줄바꿈 허용) |
gap |
아이템 사이 여백 | 20px / 10px 20px (행·열 각각) |
justify-content |
메인축 방향 정렬 | flex-start / center / space-between / space-around |
align-items |
수직축 방향 정렬 | stretch(기본) / center / flex-start / flex-end |
메인축 vs 수직축:
→
flex-direction: row일 때 — 메인축 = 가로, 수직축 = 세로flex-direction: column일 때 — 메인축 = 세로, 수직축 = 가로→
justify-content는 메인축, align-items는 수직축 정렬
아이템 속성
자식 요소(아이템)에 지정하는 속성입니다.
| 속성 | 역할 |
|---|---|
flex-basis |
아이템 기본 크기 설정 (row일 때 너비 / column일 때 높이) |
flex-grow |
남은 공간을 얼마나 차지할지 비율 (0이면 늘어나지 않음) |
flex-shrink |
공간이 부족할 때 얼마나 줄어들지 비율 (0이면 줄어들지 않음) |
order |
배치 순서 — 숫자가 작을수록 먼저 배치 (기본값: 0) |
flex-basis vs width 차이
flex-basis: 100px
.item {
flex-basis: 100px;
}
/* 100px 미만은 늘어나고,
100px 초과는 그대로 유지 */
width: 100px
.item {
width: 100px;
}
/* 100px 초과하는 것도
100px에 맞춰 고정 */
flex 단축 속성
flex는 flex-grow, flex-shrink, flex-basis를 한 번에 지정하는 단축 속성입니다.
.item { flex: 1; }
/* = flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
.item { flex: 1 1 auto; }
/* = flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
.item { flex: 0 0 100%; }
/* grow·shrink 없이 기본 크기 100% 고정 (반응형 카드에서 자주 사용) */
.item { flex: 0 0 calc(50% - 10px); }
/* 2열 카드 레이아웃: 50% - 간격 보정 */
| 값 | grow | shrink | basis | 의미 |
|---|---|---|---|---|
flex: 1 |
1 | 1 | 0% | 균등 분배 (가장 자주 사용) |
flex: 1 1 auto |
1 | 1 | auto | 내용 크기 기준으로 유연하게 |
flex: 0 0 100% |
0 | 0 | 100% | 고정 너비 (모바일 1열 카드) |
반응형 @media 쿼리
화면 크기에 따라 다른 CSS를 적용하는 기법입니다. 모바일 퍼스트(Mobile First) 방식은 기본 스타일을 모바일로 작성하고, min-width로 화면이 커질 때 스타일을 추가합니다.
| 미디어 쿼리 | 적용 조건 |
|---|---|
@media (min-width: 600px) |
뷰포트 너비가 600px 이상일 때 (태블릿·데스크탑) |
@media (min-width: 768px) |
뷰포트 너비가 768px 이상일 때 |
@media (min-width: 1024px) |
뷰포트 너비가 1024px 이상일 때 (데스크탑) |
/* 기본 (모바일): 세로 방향 */
.flex_box {
display: flex;
flex-direction: column;
align-items: center;
}
/* 600px 이상 (데스크탑): 가로 방향으로 전환 */
@media (min-width: 600px) {
.flex_box {
flex-direction: row;
gap: 50px;
}
.flex_item img {
width: 100%;
}
}
Mobile First 핵심: 기본 CSS = 모바일 레이아웃 →
반대로
@media (min-width: ...)로 큰 화면 스타일 추가.반대로
max-width를 쓰면 Desktop First(데스크탑 기준).
반응형 카드 레이아웃 예제
화면 크기에 따라 1열 → 2열 → 4열로 자동 전환되는 카드 레이아웃입니다.
/* 공통 리셋 */
* { margin: 0; padding: 0; box-sizing: border-box; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
/* 카드 리스트: flex + 줄바꿈 허용 */
.card-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
/* 기본 (모바일): 1열 — 100% */
.card {
flex: 0 0 100%;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
}
/* 이미지 꽉 채우기 */
.card img {
width: 100%;
display: block;
object-fit: cover;
object-position: center;
height: 300px;
}
/* 768px 이상: 2열 */
@media (min-width: 768px) {
.card {
flex: 0 0 calc(50% - 10px); /* 2개 × 50% - gap 보정 */
}
}
/* 1024px 이상: 4열 */
@media (min-width: 1024px) {
.card {
flex: 0 0 calc(25% - 15px); /* 4개 × 25% - gap 보정 */
}
}
gap 보정 공식: gap이
2열:
4열:
20px이고 n열일 때2열:
calc(50% - 10px) → gap(20px) ÷ 2 = 10px4열:
calc(25% - 15px) → gap(20px) × 3 ÷ 4 = 15px