Css #11 - display: flex (3)

align-content: 컨텐츠 정렬 속성

플렉스된 컨테이너 안에 자식드이 매우 많을 경우 여러 줄이 형성된다. 이 때 한 줄을 하나의 content로 본다. 그래서 속성 이름이 align-content이다.
이 속성은 컨텐츠들을 각각 세로로 정렬하고, 요소 사이에(between), 주위에(around) 동일한 간격을 주어 배치할 수 있다.

• align-content: flex-start;
  :여러 줄들을 컨테이너의 top위치에 배치한다.
  

• align-content: flex-end;
  :여러 줄들을 컨테이너의 bottom위치에 배치한다.
  

• align-content: center;
  :여러 줄들을 컨테이너의 middle위치에 배치한다.
  

• align-content: space-between;
  :여러 줄들 사이에 동일한 간격을 준다.
  

• align-content: space-around;
  :여러 줄들 주위에 동일한 간격을 준다.
  

• align-content: space-evenly;
  :여러 줄들에 모두 동일한 간격을 준다.
  

• align-content: stretch;
  :여러 줄들을 컨테이너(부모박스)의 맞도록 늘린다.
  

이 때 컨텐츠들 사이에 여백을 주고 싶을 경우
gap속성을 준다.

ex) gap: 20px;
row-gap:20px;
column-gap:20px;