W tym artykule zilustrujemy metodę zamawiania elementów flex i grid w CSS Tailwind.
Jak zamawiać elementy Flex i Grid w Tailwind?
Aby zamówić elementy flex i grid w CSS Tailwind, utwórz plik HTML. Następnie użyj narzędzia „order-” i określ wartość zamówienia w programie HTML, aby zmienić kolejność elementów flex i grid. Umożliwia renderowanie elementów elastycznych w innej kolejności niż wyświetlają się w DOM (Document Object Model). Aby zapewnić zmiany, wyświetl stronę internetową w formacie HTML.
Spójrz na podane kroki, aby lepiej zrozumieć:
Krok 1: Zamów elementy Flex i Grid w programie HTML
Stwórz program HTML i użyj „ kolejność-
< ciało >
< dz klasa = 'flex h-20' >
< dz klasa = 'zamówienie-3 bg-czerwony-500 w-32 m-1' > 1 < / dz >
< dz klasa = 'zamówienie-ostatnie bg-żółte-500 w-32 m-1' > 2 < / dz >
< dz klasa = „zamów najpierw bg-turkusowy-500 w-32 m-1” > 3 < / dz >
< dz klasa = 'zamówienie-2 bg-orange-500 w-32 m-1' > 4 < / dz >
< / dz >
< / ciało >
Tutaj:
- “ zamówienie-3 ” class ustawia kolejność elementu na 3, a element elastyczny zostanie umieszczony jako trzeci element w pojemniku elastycznym.
- “ zamówienie-ostatnie ” class ustawia kolejność elementu jako ostatnią i będzie to ostatni element w elastycznym kontenerze.
- “ najpierw zamów ” określa kolejność elementu, który ma być pierwszy i zostanie umieszczony jako pierwszy element w elastycznym kontenerze.
- “ zamówienie-2 ” class ustawia kolejność elementu na 2 i zostanie on umieszczony jako drugi element w elastycznym kontenerze.
- “ w-32 ” stosuje 32 jednostki szerokości do każdego elastycznego elementu.
- “ m-1 ” dodaje 1 margines jednostkowy wokół każdego elementu elastycznego.
Krok 2: Sprawdź dane wyjściowe
Wyświetl stronę HTML, aby upewnić się, że elementy flex i grid zostały zamówione:
Można zauważyć, że elementy flex i grid zostały pomyślnie uporządkowane zgodnie z ich specyfikacją.
Wniosek
Aby zamówić elementy flex i grid w CSS Tailwind, użyj „ zamówienie-