Questo articolo illustrerà il metodo per ordinare elementi flex e grid in Tailwind CSS.
Come ordinare articoli Flex e Grid in Tailwind?
Per ordinare elementi flex e grid in Tailwind CSS, crea un file HTML. Quindi, utilizzare l'utilità 'order-' e specificare il valore dell'ordine nel programma HTML per modificare l'ordine degli elementi flessibili e della griglia. Consente di rendere gli elementi flessibili in un ordine diverso da quello visualizzato nel DOM (Document Object Model). Per garantire le modifiche, visualizzare la pagina Web HTML.
Guarda i passaggi forniti per una migliore comprensione:
Passaggio 1: ordina gli articoli Flex e Grid nel programma HTML
Crea un programma HTML e usa il ' ordine-
< corpo >
< div classe = 'flessibile h-20' >
< div classe = 'ordine-3 bg-rosso-500 w-32 m-1' > 1 < / div >
< div classe = 'ordine-ultimo bg-giallo-500 w-32 m-1' > 2 < / div >
< div classe = 'ordina-prima bg-teal-500 w-32 m-1' > 3 < / div >
< div classe = 'ordine-2 bg-arancione-500 w-32 m-1' > 4 < / div >
< / div >
< / corpo >
Qui:
- “ ordine-3 ” class imposta l'ordine dell'elemento su 3 e l'elemento flessibile sarà posizionato come terzo elemento all'interno del contenitore flessibile.
- “ ordine-ultimo ” class imposta l'ordine dell'elemento in modo che sia l'ultimo e sarà l'ultimo elemento all'interno del contenitore flessibile.
- “ ordine-prima ” class specifica l'ordine in cui l'elemento deve essere il primo e verrà posizionato come primo elemento all'interno del contenitore flessibile.
- “ ordine-2 ” class imposta l'ordine dell'elemento su 2 e verrà posizionato come secondo elemento all'interno del contenitore flessibile.
- “ w-32 La classe ” applica 32 unità di larghezza a ciascun articolo flessibile.
- “ m-1 La classe aggiunge 1 unità di margine attorno a ciascun elemento flessibile.
Passaggio 2: verificare l'output
Visualizza la pagina web HTML per assicurarti che gli elementi flex e grid siano stati ordinati:
Si può osservare che gli articoli flex e grid sono stati ordinati con successo in base a quanto specificato.
Conclusione
Per ordinare elementi flex e grid in Tailwind CSS, utilizza il ' ordine-