정의 및 사용 방법

flexbox에서 order 속성은 플렉스 컨테이너에서 해당 플렉스 아이템의 배치 순서를 지정합니다.
배치 순서는 정수 값을 사용하며, 값이 작을수록 다른 플렉스 아이템에 비해 시각적으로 먼저 배치됩니다.

알아두세요!
order 속성은 flexbox, grid 레이아웃에서 공통으로 사용할 수 있습니다.
이 글에서는 flexbox에서의 order 속성만 설명합니다.

order 속성은 해당 플렉스 아이템의 시각적 배치 순서를 지정합니다.
배치 순서는 플렉스 컨테이너의 흐름 방향을 기준으로 하며, HTML의 마크업 순서와 관계없이 적용됩니다.

order 속성은 정수값을 사용하여 배치 순서를 지정합니다.

  • 설정된 값이 작을수록 다른 플렉스 아이템에 비해 시각적으로 먼저 배치됩니다.
  • 반면에, 값이 클수록 다른 플렉스 아이템에 비해 시각적으로 나중에 배치됩니다.
  • 같은 값의 플렉스 아이템끼리는 HTML의 마크업 순서대로 배치됩니다.

모든 플렉스 아이템은 order 속성을 지정하지 않았을 때 "초깃값으로 0이 할당"됩니다.

기본 예제

아래의 'CSS 라이브 데모'를 통해 플렉스 아이템이 order 속성의 값에 따라 다른 플렉스 아이템에 비해 시각적 배치 순서가 어떻게 되는지 직접 확인해 보세요.

HTML 
<div class="flex-container">
    <div class="item order-0">order: 0</div>
    <div class="item order-1">order: 1</div>
    <div class="item order-1">order: 1</div>
    <div class="item change-order">순서 바꾸기</div>
</div>
CSS 
.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    border: 2px dashed gray;
    flex-direction: row; /* 플렉스 컨테이너의 흐름 방향(배치 순서)이 왼쪽 → 오른쪽 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     transition: order 1s; /* 애니메이션이 가능 */
}
.order-0, .order-1, .order-2 {
    background-color: silver;
}
.order-0 { order: 0;} .order-1 { order: 1; } .order-2 { order: 2; }
.change-order {
    background-color: yellow;
    order: /* value <= 라이브 데모에서 동적으로 구현 */
}
CSS 데모: flexbox의 order 데모 버튼을 클릭해 보세요!
플렉스 아이템의 시각적 배치 순서를 지정할 수 있습니다.

참고하세요 ☝️
order 속성의 계산된 정수 값은 애니메이션이 가능합니다.
즉, transition이나 animation 속성으로 order 속성에 대한 애니메이션 효과를 구현할 수 있습니다.

형식 구문

CSS 
selector {
    order: <integer>
    /* <integer>: 정수(소수점 불가) */
}

구문

CSS 
/* <integer>: 정수(소수점 불가) */
order: 0; /* 초깃값 */
order: -1;
order: 2;

/* 글로벌 값 */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;

값

정수를 값으로 사용할 수 있습니다.

형식 정의

flexbox의 order 속성 형식 정의
초깃값 0
적용 요소 플렉스 아이템
상속 아니오
애니메이션 계산된 정수 값

접근성 고려 사항

order는 HTML의 마크업 순서와 관계없이 해당 플렉스 아이템의 시각적 배치 순서만 바꾸는 스타일링 속성입니다.

이러한 구현은 시각적 측면에서 매우 유용하게 사용될 수 있지만, 저시력으로 인해 스크린 리더나 접근성 보조 기술을 사용하는 사용자에게는 실제 HTML의 구조와 시각적 순서 상의 차이로 인해 부정적인 영향을 줄 수 있습니다.

# tab 포커스 탐색 이슈

특히, 사용자는 웹 페이지에서 사용자가 키보드의 탭(Tab) 키를 눌러 웹 페이지의 포커스가 가능한 요소에 포커스를 맞춰 탐색할 수 있는데 포커스되는 요소의 순서가 시각적 순서와 다른 경우에는 사용자 경험을 방해할 수 있습니다.

예를 들면, 다음과 같은 경우입니다.

HTML 
<div class="flex-container">
    <a href="" class="item">Item-1</a>
    <a href="" class="item first-order-item">Item-2</a>
    <a href="" class="item">Item-3</a>
</div>
CSS 
.flex-container {
    display: flex;
}
.first-order-item {
    order: -1; /* 마크업 순서와 상관없이 맨 처음에 배치됩니다. */
}

따라서, tab 포커스 탐색 제어 순서처럼 HTML의 구조 순서와 시각적 순서가 불일치하더라도 사용자에게 부정적인 영향은 없는지 먼저 살펴보는 것이 중요합니다.

활용 예제

order 속성은 HTML의 마크업 순서를 변경하지 않고, 플렉스 아이템의 시각적 배치 순서를 변경할 수 있습니다.
이를 활용하면 특정 요소를 시각적으로 먼저 표시하거나, 상태 변화 및 애니메이션과 함께 동적인 레이아웃 효과를 구성할 수 있습니다.

오직 시각적 스타일을 위한 배치 순서가 계속 변경되는 예제

다음 예제는 각각의 플렉스 아이템에 서로 다른 order 값을 애니메이션과 함께 적용하여, 시각적 배치 순서가 계속 변경되는 예제입니다.
이처럼 order 속성은 오직 시각적 효과를 구성하는 용도로도 활용할 수 있습니다.

실제 적용된 모습
HTML 
<div class="light-container" aria-hidden="true">
    <div class="light red-light"></div>
    <div class="light green-light"></div>
    <div class="light blue-light"></div>
</div>

코드 부연설명
aria-hidden="true"는 스크린 리더 및 보조 기술을 위한 속성으로, aria-hidden 속성의 값이 true로 설정되면 해당 요소와 그 안에 포함된 콘텐츠는 접근성 기술을 통해 감지되지 않습니다. 위 HTML 예제에서는 <div> 태그가 오직 시각적 장식으로만 활용되었기 때문에 웹접근성 향상을 위해 사용되었습니다.

CSS 
.light-container {
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding: 2em;
}

/* 공통 스타일 */
.light {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* 빨간 조명 */
.red-light {
    background: #ff3b3b;
    box-shadow:
        0 0 20px #ff3b3b,
        0 0 50px #ff3b3b,
        0 0 90px #ff3b3b;
    animation-name: red-order-animation;
}

/* 초록 조명 */
.green-light {
    background: #00ff88;
    box-shadow:
        0 0 20px #00ff88,
        0 0 50px #00ff88,
        0 0 90px #00ff88;
    animation-name: green-order-animation;
}

/* 파란 조명 */
.blue-light {
    background: #3b82ff;
    box-shadow:
        0 0 20px #3b82ff,
        0 0 50px #3b82ff,
        0 0 90px #3b82ff;
    animation-name: blue-order-animation;
}

/* 빨간 조명의 순서 변경 */
@keyframes red-order-animation {
    0% {
        order: 1;
        transform: scale(1);
    }
    33% {
        order: 3;
        transform: scale(1.25);
    }
    66% {
        order: 2;
        transform: scale(0.85);
    }
    100% {
        order: 1;
        transform: scale(1);
    }
}

/* 초록 조명의 순서 변경 */
@keyframes green-order-animation {
    0% {
        order: 2;
        transform: scale(0.85);
    }
    33% {
        order: 1;
        transform: scale(1);
    }
    66% {
        order: 3;
        transform: scale(1.25);
    }
    100% {
        order: 2;
        transform: scale(0.85);
    }
}

/* 파란 조명의 순서 변경 */
@keyframes blue-order-animation {
    0% {
        order: 3;
        transform: scale(1.25);
    }
    33% {
        order: 2;
        transform: scale(0.85);
    }
    66% {
        order: 1;
        transform: scale(1);
    }
    100% {
        order: 3;
        transform: scale(1.25);
    }
}

내비게이션의 추천 아이템을 우선 배치하는 예제

order 속성을 사용하면 HTML의 마크업 순서를 변경하지 않고, 특정 플렉스 아이템을 시각적으로 먼저 배치할 수 있습니다. 단, 이 예제처럼 HTML의 구조 순서와 시각적 순서가 불일치하는 경우에는 사용자에게 부정적인 영향은 없는지 먼저 살펴보는 것이 중요합니다.

실제 적용된 모습
HTML 
<header class="header">
    <nav class="nav">
        <a href="">홈</a>
        <a href="">강의</a>
        <a href="" class="event-link">이벤트</a>
        <a href="">문의하기</a>
    </nav>
</header>
CSS 
.nav {
    display: flex;
    gap: 1em;
}
.event-link {
    order: -1;
    font-weight: bold;
    color: crimson;
}

브라우저 호환성

order 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
order 29 12 20 9

명세서

order 속성의 명세서 사양
명세서 사양
order CSS Display Module Level 3
#order-property

참고문헌

같이 보기