속성 order

order 속성은 flex 컨테이너 내 개별 flex 블록의 순서를 지정합니다. 특정 flex 블록에 적용됩니다.

이 속성은 양의 정수 또는 음의 정수를 값으로 가집니다. 숫자가 작을수록, 다른 요소들에 대한 HTML 코드 내 위치와 관계없이 요소가 더 일찍 배치됩니다.

문법

선택자 {
	order: 양수 또는 음수;
}

예제

이 예제에서는 모든 블록에 order를 사용하여 배치 순서를 지정했습니다. 가장 먼저 위치하는 것은 order 값이 -1인 블록이고, 다음은 order 값이 1인 블록이며, 이후 숫자가 증가하는 순서대로 배치됩니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
	<div id="elem6">6</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#elem1 {
	order: 4;
}
#elem2 {
	order: 5;
}
#elem3 {
	order: 3;
}
#elem4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

같이 보기

flex-direction 속성,
flex 블록 축의 방향을 지정함
justify-content 속성,
주축을 기준으로 정렬을 지정함
align-items 속성,
교차축을 기준으로 정렬을 지정함
flex-wrap 속성,
flex 블록의 다중 줄 바꿈을 지정함
flex-flow 속성,
flex-direction과 flex-wrap의 약식 속성
align-self 속성,
단일 블록의 정렬을 지정함
flex-basis 속성,
특정 flex 블록의 크기를 지정함
flex-grow 속성,
flex 블록의 확장 비율을 지정함
flex-shrink 속성,
flex 블록의 축소 비율을 지정함
flex 속성,
flex-grow, flex-shrink 및 flex-basis의 약식 속성