Flexbox & Grid
order
플렉스 박스와 그리드 아이템의 순서를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
order-<number> | order: <number>; |
-order-<number> | order: calc(<number> * -1); |
order-first | order: calc(-infinity); |
order-last | order: calc(infinity); |
order-none | order: 0; |
order-(<custom-property>) | order: var(<custom-property>); |
order-[<value>] | order: <value>; |
예제
명시적으로 정렬 순서 설정하기
order-<number> 유틸리티를 사용해 플렉스와 그리드 아이템을 문서에 나타난 순서와 다르게 렌더링할 수 있습니다. 예를 들어 order-1과 order-3 같은 유틸리티를 사용할 수 있습니다.
01
02
03
<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 유틸리티를 사용하세요:
01
02
03
<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() 함수를 추가해 줍니다.
반응형 디자인
접두사 an order 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="order-first md:order-last ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
