CSS의 align-items 속성은 플렉스 컨테이너 내부의 플렉스 아이템들을 교차축(세로 방향)을 기준으로 정렬할 때 사용합니다. 주축(main axis) 방향으로 정렬하는 justify-content와 달리, align-items는 아이템의 수직 위치를 제어한다는 점이 핵심입니다.
align-items 속성의 주요 값
- stretch (기본값): 컨테이너 높이에 맞춰 아이템을 늘려 채웁니다.
- center: 아이템을 교차축 중앙에 배치합니다.
- flex-start: 아이템을 교차축 시작점에 배치합니다.
- flex-end: 아이템을 교차축 끝점에 배치합니다.
- baseline: 아이템을 텍스트 기준선(baseline)에 맞춰 정렬합니다.
예제 코드
아래 코드는 display: flex가 적용된 컨테이너에서 align-items: center를 사용해 네 개의 박스를 세로 중앙으로 정렬하는 예제입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
align-items: center;
height: 150px;
width: 600px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>코드 설명 및 실행 결과
.mycontainer클래스에display: flex를 지정해 자식 요소들이 플렉스 레이아웃으로 배치되도록 설정했습니다.align-items: center덕분에 높이 150px인 컨테이너 안에서 Q1~Q4 박스들이 세로 중앙에 정렬됩니다.- 각 자식 div는 흰색 배경과 함께 고정 폭 100px, 여백 5px를 가지며 가로로 나란히 배치됩니다.
정리
align-items는 플렉스 레이아웃에서 세로 정렬을 담당하는 필수 속성입니다. 값을 stretch, center, flex-start, flex-end 등으로 바꿔가며 다양한 정렬 효과를 실험해 보면 레이아웃 감각을 익히는 데 큰 도움이 됩니다.