Šis raksts ilustrēs elastīgo un režģa vienumu pasūtīšanas metodi Tailwind CSS.
Kā pasūtīt Flex un Grid preces Tailwind?
Lai pasūtītu elastīgus un režģa vienumus pakalpojumā Tailwind CSS, izveidojiet HTML failu. Pēc tam izmantojiet utilītu “order-” un norādiet pasūtījuma vērtību HTML programmā, lai mainītu elastīgo un režģa vienumu secību. Tas ļauj atveidot elastīgos vienumus citā secībā, nekā tie tiek parādīti DOM (dokumenta objektu modelī). Lai nodrošinātu izmaiņas, skatiet HTML tīmekļa lapu.
Apskatiet norādītās darbības, lai labāk izprastu:
1. darbība: pasūtiet Flex un Grid vienumus HTML programmā
Izveidojiet HTML programmu un izmantojiet ' pasūtījums-
< ķermenis >
< div klasē = 'flex h-20' >
< div klasē = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div klasē = 'order-last bg-yellow-500 w-32 m-1' > 2 < / div >
< div klasē = 'order-first bg-teal-500 w-32 m-1' > 3 < / div >
< div klasē = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / ķermenis >
Šeit:
- ' pasūtījums-3 ” klase iestata elementa secību uz 3, un elastīgais vienums tiks novietots kā trešais vienums elastīgajā konteinerā.
- ' pasūtījums-pēdējais ” klase iestata elementa secību kā pēdējo, un tas būs pēdējais vienums elastīgajā konteinerā.
- ' pasūtīt-vispirms ” klase norāda elementa secību, lai tas būtu pirmais, un tas tiks novietots kā pirmais elements elastīgajā konteinerā.
- ' pasūtījums-2 ” klase iestata elementa secību uz 2, un tas tiks novietots kā otrais vienums elastīgajā konteinerā.
- ' w-32 ” klase katrai elastīgajai precei piemēro 32 platuma vienības.
- ' m-1 ” klase pievieno 1 vienības rezervi ap katru elastīgo vienumu.
2. darbība: pārbaudiet izvadi
Skatiet HTML tīmekļa lapu, lai pārliecinātos, ka ir pasūtīti elastīgie un režģa vienumi:
Var novērot, ka flex un režģa elementi ir veiksmīgi pasūtīti, saskaņā ar kuriem tie tika norādīti.
Secinājums
Lai pasūtītu elastīgus un režģa vienumus Tailwind CSS, izmantojiet “ pasūtījums-