#14. CSS - Flex items 속성 :: order

order

item의 순서를 설정합니다.
item에 숫자를 지정하고, 숫자가 클수록 순서가 뒤에 배치됩니다.
음수가 허용되고, order 숫자가 같은 경우에는 HTML상 배치가 우선시 됩니다.
default 값은 0으로 order을 정하지 않는 경우에는 HTML상 배치로 작성됩니다.

order: 순서;

 

<!-- HTML -->
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

/* css */

.container{
  border: 4px solid;
  display: flex;
}

.container .item {
  width: 100px;
  height:100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1 {
  order: 1;
}
.item4 {
  order: 1;
}

위의 예에서 item2부터 item6까지는 order가 적용되지 않아 기본값인 0을 갖고 있습니다. item1 과 item4 는 order가 1로 동일하지만 HTML상 배치가 item1이 우선시 되기 때문에 item1 , item4의 순서를 갖게 됩니다.

추가적으로 item4에 음수가 사용되는 경우 default값이 적용된 2보다 앞에 위치하게 됩니다.

/* css */
.item4 {
  order: -10;
}