order

order 순위가 매겨진 자식요소

.box:nth-child(3) {
  background-color: blueviolet;
  order: 2;
}

.box:nth-child(6) {
  background-color: aqua;
  order: -1;
}

부모 컨테이너 안 18개의 자식 요소가 있을 때 오름차순으로 각 상자에 번호를 매겼다. 컨테이너 안의 특정 자식 요소에 순서를 지정할 수 있는데 그 때 사용하는 속성이 order이다. 위의 그림은 6번째 박스에 order:-1을 부여하였고 3번째 박스에 order:2를 부여하였다. 기본적으로 컨테이너 안의 자식 box의 순서는 0이고 번호가 낮을수록 우선순위가 높다.