Acest articol va ilustra metoda de a comanda articole flex și grid în Tailwind CSS.
Cum să comand articole Flex și Grid în Tailwind?
Pentru a comanda articole flex și grid în Tailwind CSS, creați un fișier HTML. Apoi, utilizați utilitarul „order-” și specificați valoarea comenzii în programul HTML pentru a schimba ordinea elementelor flexibile și grid. Acesta permite ca elementele flexibile să fie redate într-o ordine diferită de cea afișată în DOM (Document Object Model). Pentru a asigura modificări, vizualizați pagina web HTML.
Uitați-vă la pașii furnizați pentru o mai bună înțelegere:
Pasul 1: Comandați articole Flex și Grid în programul HTML
Faceți un program HTML și utilizați „ ordine-
< corp >
< div clasă = „flex h-20” >
< div clasă = „comanda-3 bg-roșu-500 w-32 m-1” > 1 < / div >
< div clasă = 'comanda-ultimul bg-galben-500 w-32 m-1' > 2 < / div >
< div clasă = „comanda-mai întâi bg-teal-500 w-32 m-1” > 3 < / div >
< div clasă = 'comanda-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / corp >
Aici:
- „ comanda-3 ” clasa setează ordinea elementului la 3 și elementul flexibil va fi poziționat ca al treilea element în containerul flexibil.
- „ comanda-ultimul ” clasa setează ordinea elementului să fie ultimul și va fi ultimul element din containerul flexibil.
- „ comanda-în primul rând ” clasa specifică ordinea elementului care urmează să fie primul și va fi poziționat ca primul articol în containerul flexibil.
- „ comanda-2 ” class setează ordinea elementului la 2 și va fi poziționat ca al doilea element în containerul flexibil.
- „ w-32 ” clasa aplică 32 de unități de lățime fiecărui articol flexibil.
- „ m-1 ” clasa adaugă o marjă de unitate în jurul fiecărui element flexibil.
Pasul 2: Verificați ieșirea
Vizualizați pagina web HTML pentru a vă asigura că elementele flex și grid au fost comandate:
Se poate observa ca articolele flex si grid au fost comandate cu succes in functie de care au fost specificate.
Concluzie
Pentru a comanda articole flex și grid în Tailwind CSS, utilizați „ comanda-