CSS align-self 속성이란?
align-self 속성은 플렉스 컨테이너(flex container) 안에서 개별 플렉스 아이템의 교차축(cross-axis) 정렬을 지정하는 CSS 속성입니다. 플렉스 레이아웃에서 align-items 속성은 모든 자식 요소에 일괄적으로 정렬을 적용하지만, align-self를 사용하면 특정 아이템만 다르게 정렬할 수 있습니다.
즉, align-self는 부모 컨테이너에 설정된 align-items 값을 덮어쓰기(override)하며, 아래와 같은 값을 사용할 수 있습니다.
- auto – 기본값으로, 부모의
align-items값 상속 - flex-start – 교차축 시작점 기준 정렬
- flex-end – 교차축 끝점 기준 정렬
- center – 교차축 중앙 정렬
- baseline – 텍스트 베이스라인 기준 정렬
- stretch – 컨테이너 높이에 맞게 늘림
align-self 사용 예제
아래 예제에서는 5개의 플렉스 아이템 중 네 번째(Q4) 항목에만 align-self: center를 적용하여 세로 방향 중앙에 배치했습니다. 나머지 아이템들은 기본 정렬 상태를 유지합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 90px;
font-size: 40px;
width: 100px;
margin: 50px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div style = "align-self: center">Q4</div>
<div>Q5</div>
</div>
</body>
</html>실행 결과 설명
위 코드를 실행하면 주황색 배경의 플렉스 컨테이너 안에 Q1부터 Q5까지 흰색 박스가 가로로 배치됩니다. 이때 align-self: center가 적용된 Q4 박스만 세로 중앙 위치로 이동하는 것을 확인할 수 있습니다.
주요 포인트 정리
align-self는 반드시display: flex가 적용된 부모 요소 안에서 동작합니다.- 개별 아이템에 인라인 스타일 또는 클래스를 통해 지정할 수 있습니다.
- 그리드(Grid) 레이아웃에서도 동일한 속성을 사용해 아이템을 정렬할 수 있습니다.
플렉스 레이아웃에서 특정 요소만 세로 정렬을 조정하고 싶다면, 전체 정렬을 바꾸지 않고 align-self 하나로 간단하게 해결할 수 있습니다.