Tento článok ilustruje spôsob objednania položiek ohybu a mriežky v CSS Tailwind.
Ako si objednať položky Flex a Grid v Tailwinde?
Ak chcete objednať položky flex a grid v Tailwind CSS, vytvorte súbor HTML. Potom použite nástroj „order-“ a zadajte hodnotu objednávky v programe HTML, aby ste zmenili poradie položiek flex a grid. Umožňuje, aby sa flexibilné položky vykreslili v inom poradí, ako sa zobrazujú v DOM (Document Object Model). Ak chcete zabezpečiť zmeny, pozrite si webovú stránku HTML.
Pre lepšie pochopenie si pozrite uvedené kroky:
Krok 1: Objednajte si položky Flex a Grid v programe HTML
Vytvorte HTML program a použite „ objednávka-
< telo >
< div trieda = 'flex h-20' >
< div trieda = 'objednávka-3 bg-červená-500 w-32 m-1' > 1 < / div >
< div trieda = 'posledná objednávka bg-žltá-500 w-32 m-1' > 2 < / div >
< div trieda = 'objednávka-prvá bg-teal-500 w-32 m-1' > 3 < / div >
< div trieda = 'objednávka-2 bg-oranžová-500 w-32 m-1' > 4 < / div >
< / div >
< / telo >
Tu:
- “ poradie-3 ” nastaví poradie prvku na 3 a flexibilná položka bude umiestnená ako tretia položka v kontajneri flex.
- “ objednávka-posledná ” nastaví poradie prvku tak, aby bolo posledné a bude to posledná položka v kontajneri Flex.
- “ objednávka-prvá ” trieda určuje poradie prvku, ktorý má byť prvý a bude umiestnený ako prvá položka v kontajneri Flex.
- “ poradie-2 ” nastaví poradie prvku na 2 a bude umiestnený ako druhá položka v kontajneri Flex.
- “ w-32 “ trieda aplikuje 32 jednotiek šírky na každú flexibilnú položku.
- “ m-1 “trieda pridáva 1 jednotku okraja okolo každej položky flex.
Krok 2: Overte výstup
Pozrite si webovú stránku HTML, aby ste sa uistili, že položky flex a grid boli zoradené:
Je možné pozorovať, že položky flex a grid boli úspešne objednané podľa toho, ako boli špecifikované.
Záver
Ak chcete objednať položky flex a grid v Tailwind CSS, použite „ objednávka-