플렉스(Flex) 레이아웃에서 특정 항목의 표시 순서를 변경하려면 order 속성을 사용합니다. 이 속성은 플렉스 컨테이너 안에서 다른 형제 항목들과 비교하여 해당 항목이 배치되는 순서를 결정합니다. 기본값은 0이며, 값이 작을수록 앞쪽에 배치됩니다.
JavaScript로 order 속성 설정하기
JavaScript에서는 element.style.order 구문을 사용하여 페이지가 로드된 후에도 버튼 클릭 같은 이벤트를 통해 항목의 순서를 동적으로 변경할 수 있습니다. 아래 예제 코드를 직접 실행해 결과를 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 420px;
height: 150px;
display: flex;
}
#box div {
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<div id = "box">
<div style = "background-color:orange;" id = "myID1">DIV1</div>
<div style = "background-color:blue;" id = "myID2">DIV2</div>
<div style = "background-color:yellow;" id = "myID3">DIV3</div>
</div>
<button onclick = "display()">Set</button>
<script>
function display() {
document.getElementById("myID1").style.order = "3";
document.getElementById("myID2").style.order = "1";
document.getElementById("myID3").style.order = "2";
}
</script>
</body>
</html>
코드 설명
- #box 요소에
display: flex;를 적용하여 세 개의 자식 DIV가 플렉스 컨테이너 안에 가로로 배치됩니다. - 버튼을 클릭하면
display()함수가 실행되어 각 항목의 order 값이 설정됩니다. - DIV2(order: 1) → DIV3(order: 2) → DIV1(order: 3) 순서로 재배치되므로, 파란색 → 노란색 → 주황색 순서로 화면에 표시됩니다.
이처럼 order 속성을 활용하면 HTML 구조를 변경하지 않고도 플렉스 항목의 시각적 배치 순서를 자유롭게 제어할 수 있습니다.