Tämä blogi antaa idean yhtä suuren tilan määrittämisestä useiden Tailwindin elementtien välille.
Kuinka määrittää yhtäläinen tila useiden elementtien välille myötätuulessa?
Käyttäjät voivat määrittää yhtäläiset välilyönnit elementtien väliin käyttämällä ' välilyönti-{x/y}-{size} ”hyötyluokka. Käyttäjät voivat lisätä tilaa x- tai y-akselille määrittämällä kokonaislukuarvon. Välilyöntiapuohjelma on välttämätön, koska se tekee verkkosivusta houkuttelevan. Jos verkkosivulla ei ole kunnollisia välilyöntejä elementtien välillä, se ei houkuttele käyttäjiä.
Otetaan koodiesimerkki yhtä suuren tilan määrittämiseksi ruudukon elementtien välille.
Tapa 1: Tilan osoittaminen X-akselille.
X-akselille määritetty yhtäläinen tila tekee yhtä suuren välin elementin oikealle ja vasemmalle puolelle. Voit määrittää tilan x-akselille käyttämällä seuraavaa syntaksia:
tilaa - x - { koko }
Koko voi olla mikä tahansa kokonaisluku.
Harkitse alla olevaa koodia yhtä suuren tilan määrittämiseksi x-akselille:
< kehon >< div luokkaa = 'mx-4 grid grid-cols-4 space-x-4' >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
kehon >
Tässä koodissa:
- ' mx-4 ” lisää 4 px marginaalin x-akselille (oikealle ja vasemmalle).
- ' ruudukko ”luokka luo ruudukon.
- ' ruudukko-sarakkeet-4 ” tee 4 saraketta ruudukkoon.
- ' välilyönti x-4 ” lisää 4 kuvapisteen tilan ruudukon elementtien väliin.
- ' bg-green-400 ” asettaa taustavärin vihreäksi.
- ' h-16 ” asettaa korkeudeksi 16 kuvapistettä.
- ' pyöristetty-lg ” tekee kulmasta pyöreän ja reunan säde on suuri.
- ' raja-2 ” tekee elementin ympärille 2 kuvapisteen reunuksen.
- ' reuna-vihreä-800 ” tekee reunuksesta tummanvihreää.
Lähtö
Esikatsele yllä olevan koodin luomaa tulosta:
Voidaan nähdä, että elementtien väliin on määritetty 4px väli.
Tapa 2: Tilan osoittaminen y-akselille.
Välit voidaan määrittää y-akselilla yllä olevan menetelmän mukaisesti, pienillä muutoksilla yllä olevaan koodiin. Se määrittää välilyönnit y-akselille (ylä- ja alareuna). Sen syntaksi on:
Alla oleva koodi voidaan toteuttaa lisäämään välilyöntejä y-akselille:
< kehon >< div luokkaa = 'mx-4 my-4 space-y-4' >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div luokkaa = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
kehon >
Tässä koodissa:
- ' mx-4 ” lisää 4 kuvapisteen marginaalin elementtien vasemmalle ja oikealle puolelle, jotta tuloste olisi optimoitumpi.
- ' minun-4 ” lisää 4 kuvapisteen marginaalin y-akselille (ylä- ja alareuna).
- ' space-y-4 ” lisää 4 pikselin tilaa y-akselille (ylhäällä ja alhaalla).
Lähtö
Tallenna yllä oleva koodi ja esikatsele sen luomaa verkkosivua nähdäksesi välit seuraavasti:
Tämä tarkoittaa yhtäläisen tilan osoittamista elementtien välille.
Johtopäätös
Määrittääkseen yhtä suuren tilan useille Tailwind-elementeille käyttäjät voivat käyttää ' välilyönti-{x/y}-{size} ” hyötyluokka ja määritä kooksi kokonaislukuarvo vaatimuksen mukaan. Elementtien välinen tasainen väli tekee tuloksesta skaalautuvampaa ja katsojat pysyvät sitoutuneina verkkosivuun. Tämä viesti on tarjonnut menetelmän määrittää yhtä suuri tila useiden Tailwindin elementtien välille.