CSS의 order 속성을 사용하면 동일한 플렉스 컨테이너 안에서 특정 플렉스 항목(flex item)이 나머지 항목들과 비교하여 어떤 순서로 배치될지 지정할 수 있습니다.
기본적으로 플렉스 항목은 HTML 문서에 작성된 순서대로 배치되지만, order 속성을 활용하면 마크업 순서를 변경하지 않고도 화면상의 배치 순서를 자유롭게 조정할 수 있습니다. 기본값은 0이며, 값이 작을수록 앞쪽에 배치되고 음수 값도 사용할 수 있습니다.
예제
다음 코드를 실행하면 order 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다. 각 항목에 부여된 order 값(1~8)에 따라 Q4가 가장 먼저, Q1이 가장 나중에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
align-content: space-between;
height: 150px;
width: 600px;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div style = "order: 8">Q1</div>
<div style = "order: 6">Q2</div>
<div style = "order: 2">Q3</div>
<div style = "order: 1">Q4</div>
<div style = "order: 7">Q5</div>
<div style = "order: 4">Q6</div>
<div style = "order: 3">Q7</div>
<div style = "order: 5">Q8</div>
</div>
</body>
</html>