order
플렉스 아이템은 입력한 순서대로 배치되지만 order 속성으로 플렉스 아이템의 순서를 정할 수 있습니다.
다음 예제는 1번 아이템, 2번 아이템, 3번 아이템이 소스 코드에 입력한 순서대로 출력됩니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
body {
margin: 0px;
}
.container {
height: 100vh;
background-color: #01579b;
display: flex;
}
.item {
padding: 20px;
}
.item:nth-child(1) {
background-color: #ffebee;
}
.item:nth-child(2) {
background-color: #ffcdd2;
font-size: 2em;
}
.item:nth-child(3) {
background-color: #ef9a9a;
font-size: 3em;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
순서 정하기
만약 내용을 변경하지 않고, 출력 순서만 바꾸고 싶다면 order 속성을 사용합니다.
기본값은 0이고, 작은 값이 있는 요소부터 출력합니다. 값이 같다면 입력한 순서대로 출력합니다.
.item:nth-child(1) {
background-color: #ffebee;
order: 3;
}
.item:nth-child(2) {
background-color: #ffcdd2;
font-size: 2em;
order: 2;
}
.item:nth-child(3) {
background-color: #ef9a9a;
font-size: 3em;
order: 1;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
order 속성의 값으로 음수도 가능합니다. 특정 아이템을 앞으로 옮기고 싶을 때 유용합니다.
.item:nth-child(1) {
background-color: #ffebee;
}
.item:nth-child(2) {
background-color: #ffcdd2;
font-size: 2em;
}
.item:nth-child(3) {
background-color: #ef9a9a;
font-size: 3em;
order: -1;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
같이 보면 좋은 글