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-
< 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-