order 예제
<style>
#hz {
width: 400px;
height: 150px;
border: 1px solid silver;
display: -webkit-flex; /* Safari */
display: flex;
}
#hz div {
width: 70px;
height: 70px;
}
/* Safari 6.1+ */
div#a {-webkit-order: 2;}
div#b {-webkit-order: 4;}
div#c {-webkit-order: 3;}
div#d {-webkit-order: 1;}
/* Standard syntax */
div#a {order: 2;}
div#b {order: 4;}
div#c {order: 3;}
div#d {order: 1;}
</style>
<div id="hz">
<div style="background-color:coral;" id="a">a2</div>
<div style="background-color:lightblue;" id="b">b4</div>
<div style="background-color:lightgreen;" id="c">c3</div>
<div style="background-color:pink;" id="d">d1</div>
</div>
결과보기
order 정의
같은 container 안 플렉스 아이템의 나열 순서 지정.
※ 번호 같을 경우, 소스 코드 나열 순서대로 정렬됨.
1.
플렉스 아이템 아닌 경우, 적용 안 됨.
2.
기본값: 0
상속여부 : X
애니효과 : O
CSS버전 : CSS3
JS구문 : object .style.order ="2";
3.
IE11 이상 주요 최신브라우저 지원.
일부 구형 브라우저는 브라우저접두어 필요.
order 구문
order: number |initial|inherit;
[속성값]
number
아이템 순서를 나타내는 정수형의 숫자. (기본값: 0)
※ 음수도 가능.
initial
이 속성의 기본값으로 설정.inherit
부모요소의 속성값 상속.
PS.
mdn order 강의
https://developer.mozilla.org/en-US/docs/Web/CSS/order (영어)
https://developer.mozilla.org/ko/docs/Web/CSS/order (한국어)
