Den här artikeln kommer att illustrera metoden för att beställa flex- och rutnätsartiklar i Tailwind CSS.
Hur beställer man Flex- och Grid-artiklar i Tailwind?
För att beställa flex- och rutnätsartiklar i Tailwind CSS, gör en HTML-fil. Använd sedan verktyget 'order-' och ange ordervärdet i HTML-programmet för att ändra ordningen på flex- och rutnätsobjekt. Det gör att flexobjekten kan renderas i en annan ordning än de visas i DOM (Document Object Model). Se HTML-webbsidan för att säkerställa ändringar.
Titta på de angivna stegen för en bättre förståelse:
Steg 1: Beställ Flex- och Grid-objekt i HTML-programmet
Gör ett HTML-program och använd ' order-
< kropp >
< div klass = 'flex h-20' >
< div klass = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div klass = 'beställ-sista bg-yellow-500 w-32 m-1' > 2 < / div >
< div klass = 'beställ-först bg-teal-500 w-32 m-1' > 3 < / div >
< div klass = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / kropp >
Här:
- ' order-3 ”-klassen sätter ordningen på elementet till 3 och flexobjektet kommer att placeras som det tredje objektet i flexbehållaren.
- ' beställning-sist ”-klassen ställer in elementets ordning som den sista och den kommer att vara den sista artikeln i flexbehållaren.
- ' beställning-först ” klass anger ordningen på elementet som ska vara först och det kommer att placeras som det första objektet i flexbehållaren.
- ' order-2 ”-klassen sätter ordningen på elementet till 2 och det kommer att placeras som det andra objektet i flexbehållaren.
- ' w-32 ” klass tillämpar 32 breddenheter för varje flexartikel.
- ' m-1 ” klass lägger till 1 enhetsmarginal runt varje flexartikel.
Steg 2: Verifiera utdata
Se HTML-webbsidan för att säkerställa att flex- och rutnätsartiklarna har beställts:
Det kan observeras att flex- och grid-artiklarna har beställts framgångsrikt enligt vilket de specificerades.
Slutsats
För att beställa flex- och rutnätsartiklar i Tailwind CSS, använd ' order-