flex-wrap: wrap-reverse — 새 줄이 위로 쌓이는 줄바꿈 완전 정리

 

 

Web Development · Flexbox

flex-wrap: wrap-reverse — 새 줄이 위로 쌓임

cross 축 반전 · 시각 순서와 DOM 순서의 분리

시작 오늘 분석할 코드

flex3과 동일하지만 flex-wrap: wrap이 아니라 wrap-reverse다. 차이점: 줄바꿈은 똑같이 일어나지만 새 줄이 아래가 아닌 위에 추가된다. 1·2가 두 번째 줄에, 3이 첫 번째 줄(맨 위)에 보인다.

#container { flex-wrap: wrap-reverse; /* 줄바꿈 + cross 축 반전 */ }

실제 출력 미리보기 — 셋째 자식이 맨 위로

1

2

3

용어 용어 정리

wrap-reverse줄바꿈 + cross 축 반전

cross 축main 축의 수직 — 줄이 쌓이는 방향

DOM 순서HTML 작성 순서 (1, 2, 3)

시각 순서화면에 보이는 순서 (3 위, 1·2 아래)

접근성스크린 리더는 DOM 순서대로 읽음

row + wrap-reversemain 가로, cross 위로

column + wrap-reversemain 세로, cross 왼쪽으로

사용 빈도매우 적음 — 특수 UI 정도

---

1 wrap vs wrap-reverse 차이

[wrap] [wrap-reverse] ┌─────────────────────┐ ┌─────────────────────┐ │ ┌───┐ ┌───┐ │ │ ┌───┐ │ │ │ 1 │ │ 2 │ │ │ │ 3 │ │ │ └───┘ └───┘ │ │ └───┘ │ │ ┌───┐ │ │ ┌───┐ ┌───┐ │ │ │ 3 │ │ │ │ 1 │ │ 2 │ │ │ └───┘ │ │ └───┘ └───┘ │ └─────────────────────┘ └─────────────────────┘ 1→2→3 (DOM 순서대로) DOM은 1,2,3 그대로지만 화면은 3이 위, 1·2가 아래

---

2 왜 cross 축이 반전되는가?

flex의 정렬 기준에서 보면, cross 축의 시작점이 아래에서 위로 뒤집힌다. 평소엔 cross 시작이 부모의 위쪽이지만, wrap-reverse에서는 cross 시작이 부모의 아래쪽이 된다. 그래서 첫 줄(=cross의 시작)이 아래에 그려진다.

---

3 시각 순서와 DOM 순서의 분리 — 위험성

※ wrap-reverse는 접근성 위험이 크다. 스크린 리더와 키보드 탭 순서는 항상 DOM 순서(1→2→3)대로 가지만, 화면에는 (3, 1, 2) 순으로 보인다. 시각적 순서를 따르는 사용자와 스크린 리더 사용자가 완전히 다른 순서를 경험하게 된다.

---

 

반응형

 

4 언제 wrap-reverse를 쓰나?

※ 사용 사례 (드물다)

• 채팅 UI에서 가장 최근 메시지가 위로 쌓이는 효과 (보통은 column-reverse가 더 적합)
• 사진 갤러리에서 "최신 추가가 항상 맨 위"
• 실험적·시각적으로 특별한 효과가 필요할 때
• 대부분의 경우 HTML 자체를 의도된 순서로 작성하는 게 정답

---

5 자주 하는 실수

실수	증상	해결
wrap-reverse로 단순 정렬 흉내	접근성 깨짐	HTML 순서 자체를 바꾸거나 order 속성
cross 축 반전 헷갈림	예상과 다른 위치에 자식 배치	main/cross 개념 정확히 이해
align-items와 함께	cross 정렬도 반대로 보임	의도한 정렬인지 재확인
키보드 탭 순서 어긋남	사용자가 길을 잃음	tabindex 또는 DOM 자체 재배열

---

핵심 한 줄 요약

wrap-reverse줄바꿈 + cross 축 반전

새 줄 위로첫 줄이 아래쪽에 그려짐

DOM vs 시각HTML 순서와 보이는 순서 분리

접근성 위험스크린 리더는 DOM 순서대로

사용 빈도매우 드뭄 — 특수 UI에만

권장HTML 자체를 의도된 순서로 작성

Tags

#flexbox #flex-wrap #wrap-reverse #cross-axis반전 #DOM순서 #시각순서 #접근성 #스크린리더 #줄바꿈 #CSS #HTML #웹개발 #티스토리

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

flexbox, flex-wrap, wrap-reverse, cross-axis반전, DOM순서, 시각순서, 접근성, 스크린리더, 줄바꿈, CSS, HTML, 웹개발, 티스토리