부모의 방향, 줄바꿈과 양축 정렬을 설정합니다.
flex-direction이 주축, justify-content가 주축 정렬, align-items가 교차축 정렬을 정합니다. flex-wrap을 켜면 공간이 부족할 때 다음 줄로 이동합니다.
A부터 D까지 네 항목은 내용만큼의 폭을 갖고, justify-content: space-between이 첫 항목을 왼쪽 끝에, 마지막 항목을 오른쪽 끝에 붙인 뒤 남는 공간을 사이사이에 똑같이 나눕니다. 이때 gap 10px는 최소 간격으로만 작동하고, align-items: center가 항목들을 180px 높이의 세로 가운데에 놓습니다. 화면이 좁아져 한 줄에 다 들어가지 않으면 flex-wrap: wrap에 따라 남은 항목이 다음 줄로 넘어갑니다.
여러 줄로 감길 때 space-between은 줄마다 따로 적용되므로, 마지막 줄에 항목이 두 개만 남으면 양 끝으로 벌어져 위 줄과 열이 맞지 않습니다. 줄이 바뀌어도 열을 맞춰야 하는 목록이라면 justify-content를 시작점에 두고 gap으로 간격을 주거나 Grid를 씁니다.
direction이 column일 때 justify-content가 세로 방향이라는 점을 놓치기 쉽습니다.
직접 바꿔보세요justify-content와 align-items 값을 각각 바꾸세요.