Tämä artikkeli havainnollistaa menetelmää flex- ja grid-kohteiden tilaamiseen Tailwind CSS:ssä.
Kuinka tilata Flex- ja Grid-tuotteita Tailwindissä?
Jos haluat tilata flex- ja grid-kohteita Tailwind CSS:ssä, luo HTML-tiedosto. Käytä sitten 'order-' -apuohjelmaa ja määritä tilausarvo HTML-ohjelmassa muuttaaksesi flex- ja grid-kohteiden järjestystä. Sen avulla joustavat kohteet voidaan renderöidä eri järjestyksessä kuin ne näkyvät DOM:ssa (Document Object Model). Varmista muutokset katsomalla HTML-verkkosivua.
Katso annettuja vaiheita ymmärtääksesi paremmin:
Vaihe 1: Tilaa Flex- ja Grid-kohteet HTML-ohjelmassa
Tee HTML-ohjelma ja käytä ' järjestys-
< kehon >
< div luokkaa = 'flex h-20' >
< div luokkaa = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div luokkaa = 'order-last bg-yellow-500 w-32 m-1' > 2 < / div >
< div luokkaa = 'order-first bg-teal-500 w-32 m-1' > 3 < / div >
< div luokkaa = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / kehon >
Tässä:
- ' tilaus-3 ”-luokka asettaa elementin järjestyksen 3:ksi ja flex-elementti sijoitetaan flex-säiliön kolmanneksi alkioksi.
- ' tilaus-viimeinen ” luokka asettaa elementin järjestyksen viimeiseksi ja se on viimeinen alkio flex-säiliössä.
- ' tilaa ensin ” luokka määrittää elementin järjestyksen olla ensimmäinen ja se sijoitetaan ensimmäiseksi kohteeksi flex-säiliössä.
- ' tilaus-2 ” luokka asettaa elementin järjestyksen 2:ksi ja se sijoitetaan flex-säiliön toiseksi kohteeksi.
- ' w-32 ” luokka soveltaa 32 leveysyksikköä jokaiseen flex-tuotteeseen.
- ' m-1 ” luokka lisää 1 yksikön marginaalin jokaisen joustotuotteen ympärille.
Vaihe 2: Tarkista lähtö
Tarkastele HTML-verkkosivua varmistaaksesi, että flex- ja grid-kohteet on tilattu:
Voidaan havaita, että flex- ja grid-kohteet on tilattu onnistuneesti niiden määrittelyn mukaisesti.
Johtopäätös
Jos haluat tilata flex- ja grid-kohteita Tailwind CSS:ssä, käytä ' tilaus-