Denne artikel vil illustrere metoden til at bestille flex- og grid-varer i Tailwind CSS.
Hvordan bestiller man flex- og gittervarer i medvind?
For at bestille flex- og gitterelementer i Tailwind CSS skal du lave en HTML-fil. Brug derefter 'ordre-'-værktøjet og angiv ordreværdien i HTML-programmet for at ændre rækkefølgen af flex- og gitterelementer. Det gør det muligt for flex-elementerne at blive gengivet i en anden rækkefølge, end de vises i DOM (Document Object Model). For at sikre ændringer, se HTML-websiden.
Se på de givne trin for en bedre forståelse:
Trin 1: Bestil Flex- og Grid-elementer i HTML-programmet
Lav et HTML-program og brug ' ordre-
< legeme >
< div klasse = 'flex h-20' >
< div klasse = 'ordre-3 bg-red-500 w-32 m-1' > 1 < / div >
< div klasse = 'ordre-sidste bg-yellow-500 w-32 m-1' > 2 < / div >
< div klasse = 'ordre-first bg-teal-500 w-32 m-1' > 3 < / div >
< div klasse = 'ordre-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / legeme >
Her:
- “ ordre-3 ” klasse indstiller rækkefølgen af elementet til 3, og flex-elementet vil blive placeret som det tredje element i flex-beholderen.
- “ ordre-sidste ” klasse indstiller elementets rækkefølge til at være den sidste, og det vil være det sidste element i flex-beholderen.
- “ ordre-først ” klasse angiver rækkefølgen af elementet til at være først, og det vil blive placeret som det første element i flex containeren.
- “ ordre-2 ” klasse indstiller rækkefølgen af elementet til 2, og det vil blive placeret som det andet element i flex-beholderen.
- “ w-32 ” klasse anvender 32 enheder bredde til hver flexvare.
- “ m-1 ” klasse tilføjer 1 enhedsmargin omkring hver flexvare.
Trin 2: Bekræft output
Se HTML-websiden for at sikre, at flex- og gitterelementerne er bestilt:
Det kan observeres, at flex- og grid-emnerne er blevet bestilt med succes, i henhold til hvilke de blev specificeret.
Konklusion
For at bestille flex- og gittervarer i Tailwind CSS, brug ' ordre-