css order 속성

 

css의 order 속성은 flex나 grid 속성에서 엘리먼트의 배치 순서를 지정하는 속성입니다.

사용법은 z-index를 생각하면 이해하기 쉽습니다.

기본값은 order:0 이고 음수 양수를 지원하고 오름차순 정렬됩니다. 만약 order 갑이 같으면 순서대로 표시됩니다.

 

html

<ul class="wrap">
  <li>order0</li>
  <li>order1</li>
  <li>order2</li>
  <li>order3</li>
  <li>order test</li>
</ul>

css

.wrap {display:flex; list-style:none;flex-direction: column;}
.wrap li:nth-child(1){ order:0;}
.wrap li:nth-child(2){ order:1;}
.wrap li:nth-child(3){ order:2;}
.wrap li:nth-child(4){ order:3;}

order값을 0부터 3까지 지정했을 때 순서대로 표출되고 test에 아무 값도 안 주면 디폴트 0이라서 order0과 같지만

test 순서가 뒤에 있기 때문에 위와 같은 정렬로 표시됩니다.

 

test를 제일 상단에 배치하기

.wrap {display:flex; list-style:none;flex-direction: column;}
.wrap li:nth-child(1){ order:0;}
.wrap li:nth-child(2){ order:1;}
.wrap li:nth-child(3){ order:2;}
.wrap li:nth-child(4){ order:3;}
.wrap li:nth-child(5){ order:-1;}

order: -1을 주게 되면 제일 상단의 order 0보다 값이 작아서 제일 위에 올라가게 됩니다.

 

test를 제일 하단에 배치하기

.wrap {display:flex; list-style:none;flex-direction: column;}
.wrap li:nth-child(1){ order:0;}
.wrap li:nth-child(2){ order:1;}
.wrap li:nth-child(3){ order:2;}
.wrap li:nth-child(4){ order:3;}
.wrap li:nth-child(5){ order:4;}

반대로 제일 하단에 배치하고 싶다면 현재 order 가장 큰 수인 3보다 높은 값을 주면 제일 하단에 위치하게 됩니다.

 

See the Pen order by kim oya (@ttuttu) on CodePen.

 

접근성 고려하기

order로 배치 위치를 변경한 경우는 시각적 위치만 변경한 것이기 때문에 스크린 리더기로 읽을 때는 의미가 없다.

따라서 접근성을 고려해야 할 때는 사용을 주의해야 한다. 

 

 

브라우저 호환성

 

 

 

 

 

참조 : https://developer.mozilla.org/ko/docs/Web/CSS/order