align-content

아이템들의 행이 2줄 이상일때 수직 방향(세로) 정렬을 설정한다

flex-wrap 속성이 wrap으로 설정되어 있어야 한다

 

1. align-content: stretch

 

요소들의 세로 크기에 맞게 설정된다

 

 

2. align-content: flex-start

 

컨테이너의 시작점을 기준으로 정렬된다

 

 

3. align-content: flex-end

 

요소들을 끝 지점(맨 아래)을 기준으로 정렬한다

 

 

4. align-content : center

 

요소들을 가운데 지점으로 정렬한다

 

 

6. align-content: space-between

 

요소들 사이의 세로 방향 간격을 일정하게 설정한다

 

 

7. align-content: space-around

 

요소들의 둘레에 균일한 간격을 설정한다

 

 

8. align-content : space-evenly

 

요소들의 사이와 양 끝의 간격을 일정하게 설정한다

인터넷 익스플로러와 엣지에서는 작동하지 않는다