이 기사에서는 Tailwind CSS에서 플렉스 및 그리드 항목을 주문하는 방법을 설명합니다.
Tailwind에서 플렉스 및 그리드 항목을 주문하는 방법은 무엇입니까?
Tailwind CSS에서 플렉스 및 그리드 항목을 주문하려면 HTML 파일을 만드세요. 그런 다음 'order-' 유틸리티를 사용하고 HTML 프로그램에서 order 값을 지정하여 flex 및 grid 항목의 순서를 변경합니다. DOM(Document Object Model)에 표시되는 순서와 다른 순서로 플렉스 항목을 렌더링할 수 있습니다. 변경 사항을 확인하려면 HTML 웹 페이지를 보십시오.
더 나은 이해를 위해 제공된 단계를 살펴보십시오.
1단계: HTML 프로그램에서 Flex 및 Grid 항목 주문
HTML 프로그램을 만들고 ' order-<값> ” 유틸리티를 사용하고 플렉스 또는 그리드 항목의 순서 값을 지정합니다. 예를 들어 'order-3', 'order-last', 'order-first' 및 'order-2' 유틸리티를 사용했습니다.
< 몸 >
< 사업부 수업 = '플렉스 H-20' >
< 사업부 수업 = '주문-3 bg-red-500 w-32 m-1' > 1 < / 사업부 >
< 사업부 수업 = '마지막 주문 bg-yellow-500 w-32 m-1' > 2 < / 사업부 >
< 사업부 수업 = '주문 우선 bg-teal-500 w-32 m-1' > 삼 < / 사업부 >
< 사업부 수업 = '주문-2 bg-orange-500 w-32 m-1' > 4 < / 사업부 >
< / 사업부 >
< / 몸 >
여기:
- “ 주문-3 ” 클래스는 요소의 순서를 3으로 설정하고 플렉스 항목은 플렉스 컨테이너 내에서 세 번째 항목으로 배치됩니다.
- “ 마지막 주문 ” 클래스는 요소의 순서를 마지막으로 설정하고 플렉스 컨테이너 내의 마지막 항목이 됩니다.
- “ 주문 우선 ” 클래스는 첫 번째 요소의 순서를 지정하고 플렉스 컨테이너 내에서 첫 번째 항목으로 배치됩니다.
- “ 주문-2 ” 클래스는 요소의 순서를 2로 설정하고 플렉스 컨테이너 내에서 두 번째 항목으로 배치됩니다.
- “ w-32 ” 클래스는 각 플렉스 항목에 32 단위의 너비를 적용합니다.
- “ m-1 ” 클래스는 각 플렉스 항목 주위에 1 단위 여백을 추가합니다.
2단계: 출력 확인
플렉스 및 그리드 항목이 주문되었는지 확인하려면 HTML 웹 페이지를 봅니다.
플렉스 및 그리드 항목이 지정된 항목에 따라 성공적으로 주문되었음을 확인할 수 있습니다.
결론
Tailwind CSS에서 플렉스 및 그리드 항목을 주문하려면 ' 주문-<값> ” 유틸리티를 사용하고 HTML 프로그램에서 플렉스 및 그리드 항목에 대한 순서 값을 지정합니다. 웹 페이지에서 플렉스 및 그리드 항목을 재정렬합니다. 확인을 위해 HTML 웹 페이지에서 변경 사항을 확인하고 변경 사항을 확인하십시오. 이 기사에서는 Tailwind CSS에서 플렉스 및 그리드 항목을 주문하는 방법을 설명했습니다.