CSS (align-content vs align-items)

🔥align-content vs align-items

flex-direction

row일때 교차축이 세로니까 align 설정은 item의 세로정렬을 의미

flex-direction

column일땐 교차축이 가로니까 align 설정의 item은 가로 정렬을 의미

수직정렬은 무조건 align-items : 을 사용
align-content는 무조건 1쥴 초과일때만 효과가 있다.

align-content

아이템이 여러줄일때 여러줄의 아이템들의 수직정렬을 의미
(만약 flex-start값을 주면 아이템들은 각 줄의 윗쪽에 배치)
(center로 값을 주면 각 줄의 가운데로 배치)

align-items

한 줄의 아이템들의 수직 정렬을 의미하고
아이템들이 top,middle,bottom에 정렬될건지를 설정