CSS Flexbox 완전정복: align-items, justify-content 차이와 사용법

CSS 레이아웃을 구성할 때 가장 많이 사용되는 도구가 Flexbox입니다. 하지만 align-items, justify-content는 매번 헷갈리기 쉬운 대표 속성이죠. 이 글에서는 Flexbox의 핵심 개념을 이미지와 함께 정리하고, 개발자가 직관적으로 이해할 수 있도록 설명합니다.

1. display: flex의 기본

먼저 부모 요소에 display: flex를 설정하면, 자식 요소들은 flexbox 규칙에 따라 정렬되기 시작합니다.

display: flex;

2. flex-direction (주축 설정)

row: 가로 정렬 (기본값)
column: 세로 정렬

flex-direction: row;

3. justify-content vs align-items

✔ justify-content: 주축(Main Axis) 정렬

flex-start: 앞쪽 정렬
center: 가운데 정렬
space-between: 요소들 사이 간격

✔ align-items: 교차축(Cross Axis) 정렬

stretch: 요소 높이/너비 맞춤 (기본값)
center: 세로 중앙 정렬 (row일 때)
flex-start, flex-end: 위/아래 정렬

Flexbox align-items justify-content 설명 이미지

4. gap으로 간격 주기

요소 사이 간격은 이제 gap으로 쉽게 해결!

gap: 16px;

5. 실무에서 많이 쓰는 패턴 예시


.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

결론

Flexbox는 적절히만 이해하고 쓰면 생산성을 확 끌어올릴 수 있는 강력한 도구입니다.
justify-content는 "주축 정렬", align-items는 "교차축 정렬"이라는 개념을 기억하세요!

---

개발, 여행, 일상 - Lemadev 블로그

CSS Flexbox 정리: align-items, justify-content 헷갈림 끝내기