순서

순서 (Order)

flex와 grid 아이템이 문서에 나타난 순서와 다르게 렌더링되도록 정렬 순서를 바꾸는 유틸리티예요. CSS의 order 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

order-<number> — order: <number>;
-order-<number> — order: calc(<number> * -1);
order-first — order: -9999;
order-last — order: 9999;
order-(<custom-property>) — order: var(<custom-property>);
order-[<value>] — order: <value>;

명시적으로 정렬 순서 설정하기

order-<number> 유틸리티(예: order-1, order-3)를 쓰면 flex와 grid 아이템을 문서에 나타난 순서와 다르게 렌더링할 수 있어요.

<div class="flex justify-between ...">
  <div class="order-3 ...">01</div>
  <div class="order-1 ...">02</div>
  <div class="order-2 ...">03</div>
</div>

아이템을 처음이나 마지막으로 정렬하기

order-first와 order-last 유틸리티를 쓰면 flex와 grid 아이템을 처음이나 마지막으로 렌더링할 수 있어요.

<div class="flex justify-between ...">
  <div class="order-last ...">01</div>
  <div class="...">02</div>
  <div class="order-first ...">03</div>
</div>

음수 값 사용하기

음수 order 값을 쓰려면 클래스 이름 앞에 대시(-)를 붙여 음수로 바꿔요.

<div class="-order-1">
  <!-- ... -->
</div>

커스텀 값 사용하기

order-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 order를 정할 수 있어요.

<div class="order-[min(var(--total-items),10)] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 order-(<custom-property>) 문법도 사용할 수 있어요.

<div class="order-(--my-order) ...">
  <!-- ... -->
</div>

이건 order-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

order 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="order-first md:order-last ...">
  <!-- ... -->
</div>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

순서