Kuidas Tailwindis Flex- ja Grid-elemente tellida?

Tailwind on CSS-i raamistik, mis pakub flexboxi ja ruudustiku paigutust stiilielementide jaoks. Paindlikku kasti ja ruudustikku kasutatakse tundlike ja dünaamiliste paigutuste loomiseks. Mõnikord soovivad kasutajad muuta painde- ja ruudustikuaja järjekorda HTML-i veebilehel, säilitades samal ajal oma algse asukoha DOM-i (dokumendiobjektimudeli) struktuuris. Sellises olukorras saavad nad kaupade visuaalseks ümberkorraldamiseks kasutada utiliidiklassi 'tellimine'.

See artikkel illustreerib Tailwind CSS-is paindlike ja ruudustikuüksuste tellimise meetodit.

Kuidas Tailwindis Flex- ja Grid-elemente tellida?

Paindlike ja ruudustikuüksuste tellimiseks Tailwind CSS-is looge HTML-fail. Seejärel kasutage painde- ja ruudustikuüksuste järjekorra muutmiseks utiliiti „order-” ja määrake HTML-programmis tellimuse väärtus. See võimaldab painduvaid üksusi renderdada erinevas järjekorras, kui need kuvatakse DOM-is (Dokumendiobjekti mudel). Muudatuste tagamiseks vaadake HTML-i veebilehte.

Parema mõistmise huvides vaadake etteantud samme:

1. samm: tellige HTML-programmis Flex- ja Grid-üksused
Looge HTML-programm ja kasutage ' järjestus- ” utiliit ja määrake painduvate või ruudustikuüksuste tellimuse väärtus. Näiteks oleme kasutanud utiliite 'order-3', 'order-last', 'order-first' ja 'order-2'.

< keha >

< div klass = 'flex h-20' >
< div klass = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div klass = 'order-last bg-yellow-500 w-32 m-1' > 2 < / div >
< div klass = 'order-first bg-teal-500 w-32 m-1' > 3 < / div >
< div klass = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >

< / keha >

Siin:

“ tellimus-3 ” klass määrab elemendi järjekorra väärtuseks 3 ja painduv element asetatakse paindekonteineri kolmandaks üksuseks.
“ tellimus-viimane ” klass määrab elemendi järjekorra viimaseks ja see on paindekonteineri viimane üksus.
“ telli - kõigepealt ” klass määrab elemendi järjekorra, et see oleks esimene ja see paigutatakse paindekonteineri esimeseks elemendiks.
“ tellimus-2 ” klass määrab elemendi järjekorra väärtuseks 2 ja see paigutatakse paindekonteineri teise üksusena.
“ w-32 ” klass rakendab igale painduvale kaubale 32 laiuseühikut.
“ m-1 ” klass lisab iga painduva üksuse ümber 1 ühiku varu.

2. samm: kontrollige väljundit
Vaadake HTML-i veebilehte ja veenduge, et painde- ja ruudustikuelemendid on tellitud:

Võib täheldada, et painduvad ja ruudustikuelemendid on edukalt tellitud, mille järgi need täpsustati.

Järeldus

Tailwind CSS-is paindlike ja ruudustikuüksuste tellimiseks kasutage ' tellimus- ” utiliit ja määrake HTML-programmis flex- ja grid-üksuste tellimuse väärtus. See korraldab veebilehe painde- ja ruudustikuüksused ümber. Kontrollimiseks vaadake muudatusi HTML-i veebilehel ja veenduge muudatuste tegemises. See artikkel on illustreerinud paindlike ja ruudustikuüksuste tellimise meetodit Tailwind CSS-is.

Kuidas Tailwindis Flex- ja Grid-elemente tellida?