align-items & align-self 완전정복 – 세로 정렬이 안 되는 이유, 여기서 해결된다!

 

Flexbox로 정렬을 하다 보면,
가로 정렬은 잘 되는데 왜 세로 정렬은 자꾸 안 맞지?
라고 생각한 적 한 번쯤 있으시죠?

그럴 땐 주축이 아닌 교차축 정렬, 즉 align-items와 align-self를 확인해봐야 해요.
이 두 속성이 Flexbox에서 세로 방향 정렬을 담당합니다.

이번 포스팅에서는 이 두 속성의 차이와 활용법을 쉽게 정리해볼게요!

---

 

✅ align-items란?

align-items는 모든 Flex 아이템들의 세로 정렬(교차축 정렬) 방식을 한 번에 지정해주는 속성이에요.

.container {
  display: flex;
  align-items: center;
}

 

---

 

📦 align-items의 속성값

값	설명
stretch	기본값. 아이템 높이를 컨테이너에 맞춰 늘림
flex-start	위쪽 정렬 (교차축 시작점)
center	세로 가운데 정렬
flex-end	아래쪽 정렬 (교차축 끝점)
baseline	텍스트 기준선에 맞춰 정렬

 

---

 

✅ align-self란?

align-items는 모든 아이템에 적용되지만,
align-self는 개별 아이템만 따로 정렬하고 싶을 때 사용해요.

.item:nth-child(2) {
  align-self: flex-end;
}

두 번째 아이템만 아래쪽 정렬!

align-self는 align-items와 동일한 속성값을 갖고 있고,
기본값은 auto예요. (→ 부모의 align-items를 따라감)

---

 

🧪 실습 예시

<div class="container">
  <div class="item">A</div>
  <div class="item special">B</div>
  <div class="item">C</div>
</div>

<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background: #eee;
}
.item {
  width: 60px;
  background: #ffa07a;
  margin: 5px;
}
.special {
  align-self: flex-end;
}
</style>

 

이 코드는 전체 아이템은 세로 가운데 정렬되지만,
두 번째 아이템만 아래쪽에 정렬돼요!

 

---

 

🤔 자주 하는 실수

• align-items를 설정했는데도 정렬이 안 될 때 →
  부모 요소 높이가 지정되지 않은 경우가 많아요!

.container {
  height: 100px; /* 있어야 정렬 기준이 생깁니다! */
}