flex align-content — 여러 줄 사이 간격 정렬 5가지 완전 정리

 

 

Web Development · Flexbox

flex align-content — 여러 줄 사이 간격 정렬

flex-wrap 시 줄 간격 5가지 · align-items와의 결정적 차이

시작 오늘 분석할 코드

이번 코드는 같은 wrapper(500×150 + flex-wrap:wrap)에 자식 3개를 똑같이 넣고, align-content만 5가지로 다르게 줘서 결과를 비교한다. align-content는 "여러 줄이 cross 축에서 어떻게 분포되는지"를 결정한다.

/* 5개 컨테이너에 같은 자식, align-content만 다름 */ #container1 { align-content: flex-start; } /* 위쪽 모음 (기본) */ #container2 { align-content: flex-end; } /* 아래쪽 모음 */ #container3 { align-content: center; } /* 가운데 모음 */ #container4 { align-content: space-between; } /* 양 끝 분산 */ #container5 { align-content: space-around; } /* 균등 분산 */

실제 출력 미리보기 — 5가지 비교

flex-start (기본값) — 위쪽으로 모임

1

2

3

flex-end — 아래쪽으로 모임

1

2

3

center — 가운데로 모임

1

2

3

space-between — 양 끝에 붙고 가운데 빈 공간

1

2

3

space-around — 모든 줄 사이에 균등 여백

1

2

3

용어 용어 정리

align-content여러 줄(line) 간 cross 정렬

align-items한 줄 내 자식 cross 정렬

flex-wrap 필수align-content는 wrap이어야 의미

flex-startcross 시작쪽 (기본값)

flex-endcross 끝쪽

center가운데

space-between양 끝 + 사이 균등

space-around각 줄 양옆 동일 여백

---

1 align-content vs align-items의 결정적 차이

align-items

• 한 줄(row) 안에서 자식들의 cross 정렬
• 줄이 1개여도 동작
• 각 자식의 위/가운데/아래

align-content

• 여러 줄이 cross 축에서 분포되는 방식
• flex-wrap이 켜져 줄이 2개 이상이어야 의미
• 줄 단위로 위/아래/사이 간격

※ 줄이 1줄이면 align-content는 효과가 거의 없거나 무시된다. 반드시 flex-wrap: wrap + 줄 2개 이상일 때 의미가 있다.

---

2 5가지 값 시각 정리

[부모 height = 150px, 줄 높이 = 약 50px × 2줄 = 100px, 빈 공간 50px] flex-start │ ▓▓▓ ▓▓▓ │ ← 줄들이 위쪽에 모임 │ ▓▓▓ │ │ │ ← 빈 공간 50px이 아래에 flex-end │ │ ← 빈 공간 위에 │ ▓▓▓ ▓▓▓ │ ← 줄들이 아래쪽에 모임 │ ▓▓▓ │ center │ │ ← 빈 공간 25px 위 │ ▓▓▓ ▓▓▓ │ │ ▓▓▓ │ │ │ ← 빈 공간 25px 아래 space-between │ ▓▓▓ ▓▓▓ │ ← 첫 줄 맨 위 │ │ ← 빈 공간 50px 가운데 │ ▓▓▓ │ ← 둘째 줄 맨 아래 space-around │ 여백 │ ← 양옆 + 사이 균등 │ ▓▓▓ ▓▓▓ │ │ 여백 │ │ ▓▓▓ │ │ 여백 │

---

3 space-between vs space-around 차이

둘 다 줄 사이에 빈 공간을 분산하지만 양 끝 처리가 다르다.

값	맨 위·아래 여백	줄 사이 여백
space-between	0 (끝에 붙음)	균등 분산
space-around	줄 사이의 절반	줄 사이의 1배 (양옆이 더해진 효과)
space-evenly (모던)	줄 사이와 동일	모두 동일

---

 

반응형

 

4 자주 하는 실수

실수	증상	해결
flex-wrap 없이 align-content	아무 효과 없음	flex-wrap: wrap 함께
줄이 1줄	align-content 무시	자식이 부모를 넘어 줄바꿈 일어나야 의미
align-items와 혼동	의도와 다른 정렬	"줄 단위 = align-content / 자식 단위 = align-items"
height 미지정	줄 사이 간격이 안 보임	부모 height 명시 (그래야 빈 공간 생김)
vendor prefix 잔존	코드 길어짐	2026년엔 표준 한 줄로 충분

---

핵심 한 줄 요약

align-content여러 줄 간 cross 정렬

전제 조건flex-wrap + 줄 2개 이상

flex-start위쪽 모음 (기본)

flex-end아래쪽 모음

center가운데 모음

space-between양 끝 붙고 사이 균등

space-around모든 줄 양옆 균등

vs align-items줄 단위 vs 자식 단위

Tags

#flexbox #align-content #flex-wrap #cross-axis #flex-start #flex-end #center #space-between #space-around #여러줄정렬 #align-items #CSS #HTML #웹개발 #티스토리

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

flexbox, align-content, flex-wrap, cross-axis, flex-start, flex-end, center, space-between, space-around, 여러줄정렬, align-items, CSS, HTML, 웹개발, 티스토리