align-content vs align-items

우선 align 종류는 flex에서 flex-direction: row 일땐 cross-axis 교차축이 세로니까,
align 설정은 아이템의 세로정렬을 의미하고,
flex-direction: column 일땐, 교차축이 가로니까
align 설정은 아이템의 가로정렬을 의미한다.
(flex-direction은 row가 default임)

거기서, 우선 flex 속성내에 아이템들이 딱 한줄인지, 여러줄인지에 따라 갈리는데
한줄이다 치면 수직정렬은 무조건 align-items: 사용한다

align-content: 는 무조건 1줄 초과일때만 효력이 있다. 2줄 이상일때..

즉
align-content: 는 아이템이 여러줄일때 여러줄의 아이템들의 수직정렬을 의미한다(만약 flex-start 값을 주면 여러줄의 아이템들은 각 줄의 윗쪽에 배치될거고, center로 값을 주면 각 줄의 center로 배치된다)

aling-items: 는 한 줄의 아이템들의 수직 정렬을 의미한다. 딱 한줄 내에 아이템들이 위에,중간에,아래에 정렬될건지를 설정함.

즉 여러줄 vs 한줄 의 (수직or 가로(if flex-direction이 column이라면..)) 정렬을 의미

참조 :

https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items