한 줄 요약
justify-content는 줄 방향으로 어디에 설지, align-items는 그 반대 방향으로 어떻게 맞출지를 정합니다.
비유로 이해하기
버스 정류장에 사람들이 한 줄로 서 있습니다. justify-content는 “줄의 앞쪽에 모일까, 가운데 모일까, 간격을 고르게 벌릴까?”를 정하는 안내원입니다.
align-items는 키가 다른 사람들을 “발끝에 맞출까, 머리끝에 맞출까, 가운데에 맞출까?”를 정합니다. 줄의 방향과 수직인 방향이죠.
비교해 보기
justify-content: flex-start(앞쪽) · center(가운데) · space-between(양 끝에 붙이고 사이를 고르게) · flex-end(뒤쪽)align-items: flex-end(발끝 맞춤) · flex-start(머리 맞춤) · center(가운데 맞춤)
직접 실행해 보기
justify-content를 center, space-between, flex-end로 차례로 바꿔 보세요. 그다음 align-items를 flex-start로 바꾸면 사람들이 천장에 매달린 모습이 됩니다.
GenerateBlocks에서는
GenerateBlocks에서 Display를 Flex로 바꾸면 Justify Content와 Align Items 선택지가 나타납니다. 히어로 안의 버튼 두 개를 가운데 정렬하거나, 헤더에서 로고와 메뉴를 양 끝에 두는 것도 이 두 가지 설정입니다.
참고: CSS-Tricks: Flexbox Guide · web.dev: Flexbox · Flexbox Froggy