CSS 순서 속성

정의와 사용법

order 속성은 유연한 항목이 같은 컨테이너 내의 다른 유연한 항목에 대한 순서를 정의합니다.

주석:요소가 유연한 항목이 아니면 order 속성은 무효입니다.

다른 것을 참조하세요:

CSS 참조 매뉴얼:flex 속성

CSS 참조 매뉴얼:flex-basis 속성

CSS 참조 매뉴얼:flex-direction 속성

CSS 참조 매뉴얼:flex-flow 속성

CSS 참조 매뉴얼:flex-grow 속성

CSS 참조 매뉴얼:flex-shrink 속성

CSS 참조 매뉴얼:flex-wrap 속성

CSS 참조 매뉴얼:align-content 속성

CSS 참조 매뉴얼:align-items 속성

CSS 참조 매뉴얼:align-self 속성

HTML DOM 참조 매뉴얼:order 속성

예제

유연한 항목의 순서를 설정하십시오:

div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}

직접 시도해 보세요

CSS 문법

order: number|initial|inherit;

속성 값

값 설명
number 기본 값은 0입니다. 유연한 항목의 순서를 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial.
inherit 이 속성을 부모 요소에서 상속합니다. 참조 inherit.

기술 세부 사항

기본값: 0
상속: no
애니메이션 제작: 지원됩니다. 별도의 속성을 참조하세요. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.order="2"

브라우저 지원

표에 수록된 숫자는 이 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다.

:-webkit- 또는 :-moz-의 숫자 규정을 사용하기 전에 최초 버전을 사용하도록 지시합니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0