속성 order

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

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

문법

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

예제

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

html<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>

css#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;
}

Результат:

같이 보기