Flexbox 레이아웃에서 개별 항목의 표시 순서를 변경하고 싶다면 CSS3의 order 속성을 사용하면 됩니다. order 속성은 각 플렉스 항목에 정수 값을 지정하며, 값이 작은 항목일수록 앞쪽에 배치됩니다. 기본값은 0이며, 음수 값도 사용할 수 있습니다.
이 속성의 가장 큰 장점은 HTML 마크업 구조를 전혀 변경하지 않고도 화면상의 시각적 순서만 자유롭게 조정할 수 있다는 점입니다. 아래 예제에서는 HTML에서 'First → Second → Third' 순서로 작성된 세 개의 div 요소가 order 값에 따라 'Third → First → Second' 순서로 표시됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
height: 150px;
display: flex;
width: 100%;
border: 2px solid red;
}
div {
width: 200px;
height: 150px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
order: 2;
}
.second {
background-color: red;
order: 3;
}
.third {
background-color: rgb(140, 0, 255);
order: 1;
}
</style>
</head>
<body>
<h1>개별 항목 재정렬 예제</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
핵심 포인트 정리
- 값이 작을수록 앞에 배치: 위 예제에서 third(order: 1)가 가장 먼저, first(order: 2), second(order: 3) 순으로 표시됩니다.
- 기본값은 0: order 속성을 지정하지 않은 항목은 기본값 0을 가지며, 같은 값이라면 HTML 문서에 작성된 순서대로 배치됩니다.
- 음수 값 사용 가능: order: -1처럼 음수를 지정하면 다른 모든 항목보다 앞에 배치할 수 있습니다.
- 접근성 유의 사항: order 속성은 시각적 순서만 변경하므로, 스크린 리더 등 보조 기술은 여전히 HTML 문서 순서로 내용을 읽습니다. 논리적으로 중요한 콘텐츠라면 HTML 구조 자체를 신중하게 설계해야 합니다.