[CSS] align-content가 뭐야?

align-items와 justify-content는 이제 완벽히 이해한 듯하다. 

그러나 그 개념만으로는 해소되지 않는 것을 만들 일이 있었다. 

 

한 달짜리 달력을 만드는데

div 한 칸에 '날짜'와 '스케줄 개수'를 넣어주어야 했다. 

 

두 요소를 감싸는 div에 align-items와 justify-content 속성을 지정해주는 것만으로는 두 위치를 모두 충족할 수 없었다. 

 

이를 위해 서칭을 하다가

display: grid, justify-items, align-content 라는 처음 보는 속성들이 있다는 것을 알게되었다. 

 

 

그중에서도 먼저 align-content에 대해 알아보고자 한다.

---

 

align-content

 

우선 align-content는 flex-wrap: wrap과 함께 아이템들을 묶은 컨테이너에서 쓰인다. 

이때 flex-wrap 속성은 Flex 컨테이너의 아이템들이 한 줄에 모두 배치되는지 아니면 여러 줄로 나뉘어 표시되는지를 결정한다.

flex-wrap: wrap은 아이템들이 여러 줄에 걸쳐 배치되는 것을 허용한다는 의미이므로, 아이템들이 정렬되어 있는 상태에서 브라우저의 사이즈가 줄어들었을 때 브라우저의 사이즈에 맞게 아이템이 하나씩 다음 줄로 내려가는 모습을 볼 수 있다. 

 

그리고 그와 함께 쓰이게 된 align-content는 여러 줄에 걸쳐 배치된 아이템들의 위치가 flex-start/ center/ flex-end/ space-between/ space-around인지 등을 지정해주는 속성인 것이다. 

 

즉, align-content 속성은 flex-wrap이 wrap으로 설정되어 Flex 컨테이너에 여러 줄이 될 때에만 유효하게 작동하는 것이다. 

 

 

https://youtu.be/eprXmC_j9A4?si=empyGQ-m2Vu23-xF