Flex Containers 속성 - align-content

교차 축(cross-axis)의 정렬 방법을 설정한다.

주의할 점은 flex-wrap 속성을 통해 Items가 여러줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있다.

Items가 한 줄일 경우 align-items 속성을 사용한다

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 시작점(flex-start)으로 정렬
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

align-content: 정렬방법;

값 stretch는 교차 축에 해당하는 너비(속성 width 혹은 height)가 값이 auto(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어난다.

 

align-content 정렬방식

 

 

 

.container{
  height: 400px;
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
.container .items{
  width: 120px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}

다음과 같이 align-content를 사용하면된다.

 

만약 item의 높이값을 지정하게 된다면 item의 높이값 만큼 늘어나기 때문에 stretch가 안될 수 있다.

stretch가 제한적으로 되는 item들