See ajaveeb annab idee Tailwindis mitme elemendi vahel võrdse ruumi määramisest.
Kuidas määrata taganttuules võrdne ruum mitme elemendi vahel?
Kasutajad saavad määrata elementide vahel võrdsed tühikud, kasutades ' tühik-{x/y}-{size} ” tarbeklass. Kasutajad saavad lisada ruumi x- või y-teljel, määrates täisarvu väärtuse. Tühikute utiliit on vajalik, kuna see muudab veebilehe atraktiivseks. Kui veebilehel ei ole elementide vahel õigeid vahesid, ei tõmba see kasutajaid ligi.
Võtame koodinäidise, et määrata ruudustiku elementide vahel võrdne ruum.
1. meetod: ruumi määramine X-teljel.
X-teljele määratud võrdne ruum muudab elemendist paremale ja vasakule võrdse vahemaa. X-teljel ruumi määramiseks kasutage järgmist süntaksit:
ruumi - x - { suurus }
Suurus võib olla mis tahes täisarv.
Kaaluge allolevat koodi, et määrata x-teljele võrdne ruum:
< keha >< div klass = 'mx-4 grid grid-cols-4 space-x-4' >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
keha >
Selles koodis:
- “ mx-4 ” lisab x-teljele (paremal ja vasakul) veerise 4 pikslit.
- ' võre ” klass loob ruudustiku.
- ' grid-cols-4 ” tehke ruudustikus 4 veergu.
- ' tühik-x-4 ” lisab ruudustiku elementide vahele 4 piksli suuruse tühiku.
- “ bg-roheline-400 ” määrab taustavärvi roheliseks.
- “ h-16 ” määrab kõrguseks 16 pikslit.
- ' ümardatud-lg ” teeb nurga ümaraks ja piirderaadius on suur.
- ' piir-2 ” teeb elemendi ümber 2pikslise äärise.
- “ ääris-roheline-800 ” muudab äärise tumeroheliseks.
Väljund
Vaadake ülaltoodud koodiga loodud väljundi eelvaadet:
On näha, et elementide vahele on määratud 4 piksli vahe.
2. meetod: ruumi määramine y-teljel.
Vahekaugusi saab määrata y-teljel sarnaselt ülaltoodud meetodile, tehes ülaltoodud koodis väikeseid muudatusi. See määrab tühikud piki y-telge (ülemine ja alumine). Selle süntaks on:
Tühikute lisamiseks piki y-telge saab rakendada allolevat koodi:
< keha >< div klass = 'mx-4 my-4 space-y-4' >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div klass = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
keha >
Selles koodis:
- “ mx-4 ” lisab väljundi optimeerimiseks elementide vasakule ja paremale servale 4 pikslit.
- “ minu-4 ” lisab y-teljele (üleval ja all) 4 piksli suuruse veerise.
- “ tühik-y-4 ” lisab y-teljele (üleval ja all) ruumi 4 pikslit.
Väljund
Salvestage ülaltoodud kood ja vaadake selle loodud veebilehe eelvaadet, et näha vahekaugust järgmiselt:
See kõik puudutab elementide vahel võrdse ruumi määramist.
Järeldus
Tailwindis mitme elemendi vahel võrdse ruumi määramiseks saavad kasutajad kasutada tühik-{x/y}-{size} ” kasuliku klassi ja määrake suuruseks täisarvuline väärtus vastavalt nõudele. Elementide vaheline võrdne vahemaa muudab väljundi skaleeritavamaks ja vaatajad jäävad veebilehega kursis olevaks. See postitus on andnud meetodi Tailwindis mitme elemendi vahel võrdse ruumi määramiseks.