flex align-self — 한 자식만 다른 cross 정렬 완전 정리

 

 

Web Development · Flexbox

flex align-self — 한 자식만 정렬 다르게

align-items 일괄 vs align-self 개별 · 부모 규칙 덮어쓰기

시작 오늘 분석할 코드

부모는 align-items: center로 모든 자식을 세로 가운데 정렬한다. 그런데 #box1에만 align-self: flex-start를 줬다. 결과: box2·box3은 가운데 있는데 box1만 위쪽에 붙는다. align-self는 부모의 align-items 규칙을 그 자식만 덮어쓴다.

#container { display: flex; align-items: center; /* 모든 자식을 세로 가운데 */ } #box1 { align-self: flex-start; /* ← box1만 위쪽으로 */ }

실제 출력 미리보기

1

2

3

용어 용어 정리

align-items부모에 부여 — 전체 자식 cross 정렬

align-self자식에 부여 — 그 자식만 cross 정렬

우선순위align-self > align-items

flex-startcross 시작 (위 또는 왼쪽)

flex-endcross 끝 (아래 또는 오른쪽)

centercross 가운데

stretchcross 방향으로 늘리기 (기본값)

baseline텍스트 베이스라인 정렬

---

1 align-items vs align-self의 차이

align-items (부모)

• flex 컨테이너에 부여
• 모든 자식에 일괄 적용
• 한 줄로 전체 정렬 정함

align-self (자식)

• flex 자식 개별에 부여
• 그 자식만 정렬 다르게
• 부모 align-items보다 우선

---

2 우선순위 — align-self가 이긴다

같은 자식에 부모의 align-items와 자식의 align-self가 충돌하면 align-self가 무조건 이긴다. CSS 우선순위(specificity)와 무관하게 flex의 규칙이다.

[부모] align-items: center ← 모든 자식 가운데로 [box1] align-self: flex-start ← box1만 위로 (덮어씀) ✓ [box2] (없음) ← 부모 규칙 적용 → 가운데 [box3] (없음) ← 부모 규칙 적용 → 가운데

---

3 align-self 가능한 값들

값	의미	row일 때
auto (기본)	부모 align-items 따름	—
flex-start	cross 시작	위쪽
flex-end	cross 끝	아래쪽
center	cross 가운데	세로 가운데
stretch	cross 방향으로 늘리기	부모 height까지
baseline	텍스트 baseline 정렬	글자 밑선 맞춤

---

 

반응형

 

4 언제 align-self를 쓰나?

※ 실용 사례

• 네비게이션 메뉴 가운데 정렬 + 로그인 버튼만 오른쪽 끝(margin-left: auto도 같은 효과)
• 카드 갤러리에서 특정 카드 하나만 강조해서 위치 다르게
• 채팅 UI에서 내 메시지는 오른쪽, 상대 메시지는 왼쪽 (column일 때 align-self로 분기)
• 에러 메시지·뱃지를 한쪽에만 붙이기

/* 채팅 예시 — column flex */ .chat { display: flex; flex-direction: column; gap: 8px; } .msg-mine { align-self: flex-end; background: #cce5ff; } .msg-other { align-self: flex-start; background: #f0f0f0; }

---

5 자주 하는 실수

실수	증상	해결
align-self를 부모에 줌	아무 효과 없음	자식에 부여
align-items와 align-self 둘 다 같은 값	align-self는 불필요	한쪽만 두기
flex가 아닌 부모에서 사용	적용 안 됨	부모 display:flex 또는 grid
main 축 정렬에 align-self 사용	main 축은 justify-content/margin auto만 가능	main은 margin-left/right: auto 활용
stretch 기본인 줄 모름	자식이 부모 높이까지 커짐	의도 시 align-items 명시

---

핵심 한 줄 요약

align-items부모 — 전체 자식 일괄 cross 정렬

align-self자식 — 개별만 cross 정렬

우선순위align-self > align-items

cross 축 기준row면 세로, column이면 가로

기본값 auto부모 align-items 따름

실용 사례채팅 좌우 분기, 메뉴 한쪽 강조

Tags

#flexbox #align-self #align-items #cross-axis #자식정렬 #우선순위 #auto #baseline #stretch #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

flexbox, align-self, align-items, cross-axis, 자식정렬, 우선순위, auto, flex-start, flex-end, center, baseline, stretch, CSS, HTML, 웹개발, 티스토리