flexbox 기본 — display:flex의 즉시 효과 완전 정리

 

 

Web Development · Flexbox

flexbox 기본 — display:flex 한 줄의 마법

main axis · cross axis · 자식 자동 가로 정렬 · 박스 모델 변환

시작 오늘 분석할 코드

div 안에 div 3개를 넣고 부모에 display: flex만 추가했다. 다른 어떤 추가 설정 없이 자식 div 3개가 한 줄에 가로로 정렬된다 — float·inline-block·table 같은 옛 트릭들이 단 한 줄로 사라진다.

#container { width: 500px; height: 300px; margin: 0 auto; display: flex; /* ← 이 한 줄로 자식 가로 정렬 */ border: 2px solid black; } #container div { width: 200px; background: #ccc; }

실제 출력 미리보기

❌ display:flex 없음 — 자식이 세로로 쌓임

1

2

3

✓ display:flex — 자식이 가로로 정렬

1

2

3

용어 용어 정리

display:flex부모를 flex 컨테이너로

flex itemflex 컨테이너의 직계 자식

main axis주축 — 자식 정렬 방향

cross axis교차축 — 주축에 수직

flex-direction주축 방향 — row/column

기본값 row왼쪽→오른쪽 (가로)

block 요소평소 div는 세로로 쌓임

display:block→flex자식 정렬 방식 자체가 바뀜

---

1 평소 div가 세로로 쌓이는 이유

div는 block 요소다. block은 가로 한 줄을 통째로 차지하므로, 자연스럽게 자식 block들은 위에서 아래로 차곡차곡 쌓인다. 가로로 늘어놓고 싶으면 옛날엔 float·inline-block·table 같은 트릭을 썼다.

---

2 display:flex 한 줄의 효과

부모에 display:flex를 주면 그 부모 자체는 여전히 block처럼 보이지만, 자식들이 새로운 규칙으로 정렬된다.

평소 (block)	display:flex 적용 후
자식이 위→아래로 쌓임	자식이 왼쪽→오른쪽으로 정렬
자식 width:100%	자식 width 그대로
height:auto면 콘텐츠 만큼만	자식들이 부모 height까지 늘어남(stretch)
vertical-align 어려움	align-items로 한 줄

---

3 main axis와 cross axis

flex의 핵심 개념. 자식이 늘어서는 방향이 main axis(주축)이고, 그 수직이 cross axis(교차축)다. 기본값은 row이므로 main이 가로, cross가 세로다.

[기본 row] main axis ─────────► ┌──────────────────┐ │ ┌─┐ ┌─┐ ┌─┐ │ cross │ │1│ │2│ │3│ │ axis │ └─┘ └─┘ └─┘ │ ▼ └──────────────────┘

---

 

반응형

 

4 width:200px × 3 = 600px가 부모 500px을 넘으면?

이번 코드는 자식 200px × 3 = 600px이 부모 500px을 초과한다. 일반 block이라면 부모를 뚫고 나가지만, flex는 자식을 자동으로 줄여 부모 안에 맞춘다(기본 flex-shrink: 1).

※ 그래서 실제 화면에서는 자식이 정확히 200px이 아니라, 약간씩 줄어들어 부모에 들어맞게 보인다. flex-shrink: 0을 주면 줄어들지 않고 부모를 뚫고 나간다.

---

5 자주 하는 실수

실수	증상	해결
display:flex를 자식에 줌	자식의 자식이 가로로 됨 (의도와 다름)	부모(컨테이너)에만
자식이 부모를 뚫음	의도하지 않은 폭 초과	flex-wrap: wrap 또는 자식 폭 줄이기
height 안 맞음	자식이 부모 높이까지 늘어남	의도한 거면 OK, 아니면 align-items 조정
flex 안에서 float	float이 무시됨	flex의 align/justify 사용
중첩 flex 헷갈림	main/cross axis가 부모마다 다름	각 컨테이너마다 따로 생각

---

핵심 한 줄 요약

display:flex부모를 flex 컨테이너로 — 자식 가로 정렬

main axis자식이 늘어서는 방향 (기본 row)

cross axismain의 수직

자식 자동 조정부모를 넘으면 자동으로 줄어듦

block → flex자식 정렬 규칙 자체가 바뀜

float 대체flex 한 줄로 옛 트릭들 불필요

Tags

#flexbox #display-flex #flex-container #main-axis #cross-axis #flex-item #가로정렬 #float대체 #레이아웃 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

flexbox, display-flex, flex-container, main-axis, cross-axis, flex-item, 가로정렬, float대체, block, 레이아웃, CSS, HTML, 웹개발, 티스토리