CSS / Tutorial / Flex / order
order는 Flex 아이템을 화면에 배치할 순서를 정합니다. 작은 정숫값의 아이템부터 배치하고, 값이 같으면 HTML에 적힌 순서를 따릅니다. 화면 배치만 바꾸므로 문서 구조와 기본 키보드 탐색 순서를 함께 바꾸는 방법으로 사용하면 안 됩니다.
기본값과 정렬 기준
.item { order: 0; }
.featured { order: -1; }order는 부모 Flex 컨테이너가 아니라 순서를 바꿀 아이템에 지정합니다. 기본값은 0이고 음수도 사용할 수 있으며, 소수나 px 단위를 붙인 값은 정숫값 문법에 맞지 않습니다. 부모가 일반 블록 배치라면 이 속성으로 그 자식의 배치 순서가 바뀌지 않습니다.
order: 1은 “첫 번째 칸에 고정”이라는 뜻이 아닙니다. 다른 아이템이 모두 0이면 값 1인 아이템은 그 뒤에 놓입니다. 일부 아이템만 값을 바꿀 때는 나머지가 기본값 0이라는 점까지 함께 비교해야 합니다. 기본 동작은 MDN order 문서에 정의되어 있습니다.
전체 예제: HTML을 유지하고 화면 순서 비교
아래 코드를 flex-order.html로 저장해 브라우저에서 엽니다. 외부 파일이나 JavaScript는 필요하지 않습니다. 두 줄 모두 HTML에는 가·나·다 순서로 버튼을 적었으며, 두 번째 줄만 서로 다른 order를 지정했습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex order와 문서 순서 비교</title>
<style>
body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
h1 { font-size: 24px; } h2 { margin: 18px 0 6px; font-size: 18px; }
.row { display: flex; gap: 8px; max-width: 360px; padding: 12px;
border: 1px solid #7795a3; background: #edf5f7; }
.item { flex: 1 1 0; min-width: 0; min-height: 60px; padding: 8px;
border: 0; border-radius: 4px; background: #176f80; color: white; font: inherit; }
.item:focus-visible { outline: 3px solid #b75c00; outline-offset: 2px; }
.changed .a { order: 2; }
.changed .b { order: 3; }
.changed .c { order: 1; }
</style>
</head>
<body>
<h1>order 비교</h1>
<h2>기본값: 모두 0</h2>
<div class="row original" role="group" aria-label="기본 순서">
<button class="item a" type="button">가</button>
<button class="item b" type="button">나</button>
<button class="item c" type="button">다</button>
</div>
<h2>가 2 · 나 3 · 다 1</h2>
<div class="row changed" role="group" aria-label="화면 순서 변경">
<button class="item a" type="button">가</button>
<button class="item b" type="button">나</button>
<button class="item c" type="button">다</button>
</div>
<p>Tab으로 이동해 화면 위치와 포커스 순서를 비교하세요. 버튼은 순서 확인용이며 별도 기능은 없습니다.</p>
</body>
</html>첫 줄은 가·나·다, 두 번째 줄은 다·가·나 순으로 보입니다. 두 번째 줄에서 다의 값 1이 가장 작고, 가의 값 2, 나의 값 3이 이어지기 때문입니다. 이 설명은 예제처럼 기본 가로 쓰기·왼쪽에서 오른쪽 row 방향을 기준으로 한 화면 순서입니다.
Tab을 누르면 첫 줄 가·나·다를 지나 두 번째 줄도 가·나·다 순서로 포커스가 이동합니다. 두 번째 줄에서는 화면의 가운데→오른쪽→왼쪽으로 이동하므로 시각적 순서와 조작 순서의 차이를 확인할 수 있습니다. 주황색 외곽선이 현재 포커스 위치입니다. 버튼 자체는 비교 실습용이므로 클릭하거나 Space를 눌러도 업무 동작은 실행하지 않습니다.
음수·같은 값·방향 변경을 한 가지씩 실습
두 번째 줄의 세 order 규칙을 아래처럼 바꾸면 다만 -1이고 가·나는 0입니다. 화면은 다·가·나가 됩니다. 실습 뒤에는 처음의 2·3·1 규칙으로 되돌리고 다음 비교를 진행하세요.
.changed .a { order: 0; }
.changed .b { order: 0; }
.changed .c { order: -1; }다음으로 처음 예제에서 나의 order만 3에서 2로 바꿉니다. 다는 1로 먼저 배치되고, 값 2로 같은 가·나는 HTML 순서에 따라 가가 먼저 나옵니다. 세 아이템을 모두 order: 0으로 바꾸면 원래 HTML 순서인 가·나·다로 복원됩니다. 같은 값 사이의 정렬과 음숫값을 별도로 확인하면 “큰 숫자가 더 앞”이라는 혼동을 피할 수 있습니다.
처음의 2·3·1을 복원한 뒤 .changed에 flex-direction: row-reverse만 추가하면 주축 시작 방향이 반대가 됩니다. 이때 작은 order부터 배치하는 기준은 유지되지만 화면을 왼쪽부터 보면 나·가·다가 됩니다. order와 row-reverse는 다른 기능이며, 줄바꿈이 있으면 줄 구성에도 정렬된 아이템 순서가 반영됩니다. 비교를 마치면 row-reverse 선언을 제거하세요.
.changed {
flex-direction: row-reverse;
}사용할 때 주의할 점과 적용되지 않는 원인
단계 안내·질문과 답·입력 폼처럼 순서 자체가 의미인 내용은 먼저 HTML을 논리적인 순서로 작성하세요. order로 화면만 고치면 화면 낭독기 읽기와 일반적인 키보드 이동에 그 변경이 반영되지 않습니다. CSS Flexbox 명세의 재배치와 접근성 규칙도 의미의 순서를 바꾸는 용도로 이 속성을 사용하지 않도록 설명합니다.
이 글의 탐색 결과는 기본 탐색 방식과 별도의 tabindex·탐색 흐름 변경을 사용하지 않은 예제의 결과입니다. tabindex에 양수를 붙여 눈에 보이는 순서만 억지로 맞추면 페이지 전체의 탐색과 유지 관리가 복잡해집니다. 반응형 화면에서 주요 내용을 앞에 보일 필요가 있다면 작은 화면에서의 읽기·조작 순서를 먼저 정하고 DOM 구조와 함께 검토하세요.
값을 바꿔도 움직이지 않으면 개발자 도구에서 해당 요소가 부모의 직접적인 Flex 아이템인지 확인합니다. 한 번 더 감싼 자손에 order를 지정하면 바깥 형제들의 순서는 바뀌지 않습니다. 다음으로 부모의 display, 다른 아이템의 계산된 order, flex-direction과 쓰기 방향, 더 우선하는 CSS 규칙을 확인합니다. 부모의 order를 바꿔 자식 내부 순서가 달라지기를 기대하는 것도 적용 대상을 혼동한 경우입니다.
