CSS에서 flex 블록의 순서

다음과 같이 한 줄로 배열된 블록들이 있다고 가정해 보겠습니다:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

HTML 코드에서의 순서를 변경하지 않고 화면에 표시되는 순서를 바꿔 보겠습니다.

이를 위해 order 속성이 존재하며, 이는 특정 요소의 순서를 다음과 같은 규칙에 따라 지정합니다: 값이 클수록 축의 끝에 가까워지고, 값이 작을수록 축의 시작 부분에 가까워집니다.

이 속성의 값은 양수 또는 음수일 수 있습니다. 기본적으로 모든 요소는 서로 연속적으로 따라가며, 이는 order가 0이라는 것을 의미합니다.

이제 요소들의 순서를 변경해 보겠습니다. 두 번째 요소에 추가 클래스 elem을 설정하고 이 클래스에 대해 order 속성을 1으로 설정합니다:

.elem {
	order: 1;
	border: 1px solid red;
}

모든 요소는 기본적으로 0의 순서를 가지지만, 우리의 두 번째 요소는 나머지 요소들보다 큰 순서를 가지므로 그들보다 뒤에 위치하게 됩니다:

이제 음수 값 -1을 지정해 보겠습니다:

.elem {
	order: -1;
	border: 1px solid red;
}

이 경우 우리의 블록은 축의 시작 부분으로 이동합니다:

다양한 축 방향에 대해 이 속성의 동작을 직접 시험해 보세요.