[챗GPT가 알려주는] flex css에 사용되는 속성중 align-items, align-content, align-self 차이점

Flexbox에서 align-items, align-content, align-self는 컨테이너 내부의 아이템을 정렬하는 데 사용되지만, 각각 적용되는 대상과 동작 방식이 다릅니다.

---

1. align-items

▶ 컨테이너 내부의 모든 아이템을 정렬

• 대상: flex 컨테이너 내의 모든 아이템
• 작동 방식: 교차 축(cross-axis, 기본값: 수직 방향)에서 모든 아이템을 동일하게 정렬

📌 예제

 

.container {
  display: flex;
  align-items: center; /* 모든 아이템을 수직 중앙 정렬 */
}

✔ align-items 속성값

값	설명
stretch	(기본값) 아이템 높이를 컨테이너에 맞게 늘림
flex-start	아이템을 교차 축의 시작 부분에 정렬
flex-end	아이템을 교차 축의 끝 부분에 정렬
center	아이템을 교차 축의 중앙에 정렬
baseline	아이템의 텍스트 기준선을 맞춤

---

2. align-content

▶ 여러 줄의 아이템 그룹을 정렬

• 대상: 여러 줄(flex-wrap: wrap;)로 나뉜 아이템 그룹
• 작동 방식: 교차 축에서 여러 줄을 정렬 (단, 단일 행이면 효과 없음)

📌 예제

 

.container {
  display: flex;
  flex-wrap: wrap; /* 여러 줄 허용 */
  align-content: space-between; /* 여러 줄을 위아래로 간격 조절 */
}

✔ align-content 속성값

값	설명
stretch	(기본값) 모든 행의 높이를 컨테이너에 맞게 늘림
flex-start	행들을 교차 축의 시작 부분에 정렬
flex-end	행들을 교차 축의 끝 부분에 정렬
center	행들을 교차 축의 중앙에 정렬
space-between	첫 번째 행은 시작, 마지막 행은 끝, 나머지는 균등 배치
space-around	각 행의 위아래 여백을 균등 배치

✅ 차이점:

• align-items: 개별 아이템이 한 줄 안에서 정렬
• align-content: 여러 줄이 있는 경우 행 단위로 정렬

---

3. align-self

▶ 개별 아이템 정렬

• 대상: 특정 flex 아이템(개별 요소)
• 작동 방식: 부모 컨테이너의 align-items 속성을 무시하고 개별적으로 정렬

📌 예제

.item {
  align-self: flex-end; /* 해당 아이템만 하단 정렬 */
}

✔ align-self 속성값

값	설명
auto	기본값, 부모의 align-items 값 따름
stretch	컨테이너의 높이에 맞게 늘어남
flex-start	교차 축의 시작 부분 정렬
flex-end	교차 축의 끝 부분 정렬
center	교차 축의 중앙 정렬
baseline	텍스트 기준선을 맞춤

✅ 차이점:

• align-items: 모든 아이템에 동일한 정렬 적용
• align-self: 특정 아이템만 개별적으로 정렬 가능

---

📌 정리

 

속성	적용 대상	설명
align-items	모든 아이템	한 줄의 모든 아이템을 정렬
align-content	여러 줄의 아이템 그룹	여러 줄을 정렬 (한 줄일 경우 무효)
align-self	개별 아이템	특정 아이템을 개별적으로 정렬

💡 Tip:

• align-items와 align-self는 한 줄의 아이템 정렬
• align-content는 여러 줄이 있을 때만 효과 있음

추가 참고: MDN Flexbox 공식 문서

Flexbox에서 align-items, align-content, align-self는 컨테이너 내부의 아이템을 정렬하는 데 사용되지만, 각각 적용되는 대상과 동작 방식이 다릅니다.