Ez a cikk bemutatja a rugalmas és rácselemek megrendelésének módszerét a Tailwind CSS-ben.
Hogyan rendeljünk Flex és Grid elemeket a Tailwindben?
A Tailwind CSS-ben rugalmas és rácselemek rendeléséhez hozzon létre egy HTML-fájlt. Ezután használja az „order-” segédprogramot, és adja meg a rendelési értéket a HTML programban a rugalmas és a rácselemek sorrendjének megváltoztatásához. Lehetővé teszi, hogy a flex elemeket a DOM-ban (Document Object Model) megjelenő sorrendtől eltérő sorrendben jelenítsék meg. A változtatások biztosításához tekintse meg a HTML weboldalt.
Tekintse meg a megadott lépéseket a jobb megértés érdekében:
1. lépés: Rendeljen Flex és Grid elemeket a HTML programban
Készíts egy HTML programot, és használd a „ sorrend-<érték> ” segédprogramot, és adja meg a rugalmas vagy rácsos tételek rendelési értékét. Például az „order-3”, „order-last”, „order-first” és „order-2” segédprogramokat használtuk.
< test >
< div osztály = 'flex h-20' >
< div osztály = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div osztály = 'order-last bg-yellow-500 w-32 m-1' > 2 < / div >
< div osztály = 'order-first bg-teal-500 w-32 m-1' > 3 < / div >
< div osztály = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / test >
Itt:
- ' rend-3 ” osztály az elemek sorrendjét 3-ra állítja, és a flex elem a harmadik elemként fog elhelyezkedni a rugalmas tárolóban.
- ' sorrend-utolsó ” osztály az elem sorrendjét az utolsónak állítja be, és ez lesz az utolsó elem a flex tárolóban.
- ' rendelj először ” osztály határozza meg az elem sorrendjét, hogy első legyen, és az első elemként kerül elhelyezésre a flex tárolóban.
- ' rend-2 ” osztály az elem sorrendjét 2-re állítja, és a második elemként kerül elhelyezésre a rugalmas tárolóban.
- ' w-32 ” osztály 32 egységnyi szélességet alkalmaz minden egyes rugalmas elemre.
- ' m-1 ” osztály minden rugalmas elem köré 1 egység margót ad.
2. lépés: Ellenőrizze a kimenetet
Tekintse meg a HTML-weboldalt, hogy megbizonyosodjon arról, hogy a flex és a rácselemek sorrendje megtörtént:
Megfigyelhető, hogy a flex és a rács tételek rendelése sikeresen megtörtént, aminek megfelelően kerültek megadásra.
Következtetés
A Tailwind CSS-ben rugalmas és rácselemek rendeléséhez használja a „ sorrend-<érték> ” segédprogramot, és adja meg a rendelési értéket a HTML programban a flex és grid elemekhez. Átrendezi a flex és a rács elemeit a weboldalon. Az ellenőrzéshez tekintse meg a módosításokat a HTML weboldalon, és ellenőrizze a változtatásokat. Ez a cikk bemutatja a rugalmas és rácselemek megrendelésének módszerét a Tailwind CSS-ben.