5. align-items

1. 개념

align-items는 Flexbox(플렉스박스) 나 CSS Grid 레이아웃에서 사용하는 속성으로,
아이템들을 교차축(Cross Axis) 방향으로 어떻게 정렬할지를 결정하는 속성입니다.

즉, justify-content가 주축(Main Axis) 방향 정렬이라면,
align-items는 그 축에 수직인 방향(교차축) 에서의 정렬 방식을 지정하는 역할을 합니다.

 

2. 주축과 교차축

 

 

즉, 주축과 교차하는 축.

이 그림에서는 주축이 가로로 되어있기에 세로축이 교차축이 되고 이를 기준으로 정렬한다.

 

 

3. 예시 

3-1 align-items 없을 때

3-2 align-items: center

 

 

 

4. 요약

속성값	설명	시각적 결과
stretch	(기본값) 아이템의 높이를 컨테이너 높이에 맞게 늘림	세로로 꽉 찬 정렬
flex-start	교차축의 시작점에 정렬	위쪽 정렬
flex-end	교차축의 끝점에 정렬	아래쪽 정렬
center	교차축의 중앙에 정렬	세로 가운데 정렬
baseline	텍스트 기준선(baseline)에 맞춰 정렬	글자 밑줄 기준 정렬