CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS3 order 속성 사용 방법 및 예제

order CSS 속성은 이동 가능한 요소가 이동 가능한 컨테이너 내에서 표시 및 레이아웃 순서를 지정합니다. 요소는 순서 값의 증가 순으로 정렬됩니다. 같은 순서 값을 가진 요소는 원본 코드에서 등장한 순서대로 레이아웃됩니다.

아래 표는 이 속성의 사용 설명과 버전 이력, 이 속성이 JavaScript 스크립트에서 사용하는 문법을 설명합니다.

기본 값:	0
적용 대상:	Flex 아이템과 Flex 컨테이너의절대 위치자식
thừa kế:	아니요
애니메이션 가능:	는.다음을 참조하십시오: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.order="2"

order 사용 문법

이 속성의 문법은 다음과 같습니다:

order:　integer　|　initial　|　inherit

아래 예제는 order 속성의 사용 방법을 설명합니다.

예제

.flex-container　{
　　　　border:　2px　solid　#000;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
}

테스트를 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
integer	알맞은 이동성 요소의 순서를 지정합니다. 기본 값은 0입니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 order 속성 값을 사용합니다.

브라우저 호환성

order 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스18+ ^-moz-，28+ Google Chrome 21+ ^-webkit-，29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- 오페라 12.1+

더 읽기

다음 튜토리얼을 참조하십시오:CSS 글꼴，CSS 단위，CSS 패턴 요소。

CSS 아웃라인 속성 CSS3 opacity 속성