Denne artikkelen vil illustrere metoden for å bestille flex- og rutenettartikler i Tailwind CSS.
Hvordan bestiller jeg Flex- og Grid-artikler i Tailwind?
For å bestille flex- og grid-elementer i Tailwind CSS, lag en HTML-fil. Bruk deretter 'ordre-'-verktøyet og spesifiser ordreverdien i HTML-programmet for å endre rekkefølgen på flex- og rutenettelementer. Den lar flekselementene gjengis i en annen rekkefølge enn de vises i DOM (Document Object Model). For å sikre endringer, se HTML-nettsiden.
Se på de gitte trinnene for en bedre forståelse:
Trinn 1: Bestill Flex- og Grid-elementer i HTML-programmet
Lag et HTML-program og bruk ' ordre-
< kropp >
< div klasse = 'flex h-20' >
< div klasse = 'ordre-3 bg-red-500 w-32 m-1' > 1 < / div >
< div klasse = 'ordre-siste bg-yellow-500 w-32 m-1' > 2 < / div >
< div klasse = 'ordre-første bg-teal-500 w-32 m-1' > 3 < / div >
< div klasse = 'ordre-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / kropp >
Her:
- ' ordre-3 Klasse setter rekkefølgen på elementet til 3 og flex-elementet vil bli plassert som det tredje elementet i flex-beholderen.
- ' ordre-siste Klasse setter elementets rekkefølge til å være den siste, og den vil være den siste varen i flex-beholderen.
- ' bestilling først Klasse spesifiserer rekkefølgen til elementet som skal være først, og det vil bli plassert som det første elementet i flex-beholderen.
- ' ordre-2 Klasse setter rekkefølgen på elementet til 2, og det vil bli plassert som det andre elementet i flex-beholderen.
- ' w-32 ” klasse gjelder 32 breddeenheter for hver flexvare.
- ' m-1 ” klasse legger til 1 enhetsmargin rundt hver flexvare.
Trinn 2: Bekreft utdata
Se HTML-nettsiden for å sikre at flex- og rutenettelementene er bestilt:
Det kan observeres at flex- og grid-elementene har blitt bestilt i henhold til det de ble spesifisert.
Konklusjon
For å bestille flex- og rutenettartikler i Tailwind CSS, bruk ' ordre-