Ez a blog ötletet ad arra, hogyan rendelhet egyenlő helyet a Tailwind több eleme között.
Hogyan rendeljünk egyenlő helyet több elem között hátszélben?
A felhasználók egyenlő szóközöket rendelhetnek az elemek között a „ szóköz-{x/y}-{size} ” használati osztály. A felhasználók egész szám megadásával helyet adhatnak az x vagy y tengelyhez. A térköz segédprogramra azért van szükség, mert vonzóvá teszi a weboldalt. Ha egy weboldalon nincs megfelelő távolság az elemek között, az nem vonzza a felhasználókat.
Vegyünk egy kódpéldát, hogy egyenlő helyet rendeljünk a rácselemek között.
1. módszer: Tér hozzárendelése az X tengelyhez.
Az x tengelyen hozzárendelt egyenlő térköz egyenlő távolságot biztosít az elemtől jobbra és balra. A hely hozzárendeléséhez az x tengelyen használja a következő szintaxist:
hely - x - { méret }
A méret tetszőleges egész szám lehet.
Vegye figyelembe az alábbi kódot, hogy egyenlő helyet rendeljen az x tengelyen:
< test >< div osztály = 'mx-4 grid grid-cols-4 space-x-4' >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
test >
Ebben a kódban:
- ' mx-4 ” 4 képpontos margót ad az x tengelyen (jobbra és balra).
- A ' rács ” osztály rácsot hoz létre.
- A ' grid-cols-4 ” készítsen 4 oszlopot a rácsban.
- A ' tér-x-4 ” 4 képpontos szóközt ad a rács elemei közé.
- ' bg-green-400 ” zöldre állítja a háttérszínt.
- ' h-16 ” a magasságot 16 képpontra állítja.
- A ' lekerekített-lg ” lekerekíti a sarkot, és nagy a szegélysugár.
- A ' határ-2 ” 2 képpontos szegélyt készít az elem körül.
- ' határ-zöld-800 ” sötétzöldté teszi a szegélyt.
Kimenet
Tekintse meg a fenti kód által létrehozott kimenetet:
Látható, hogy az elemek között 4px távolság van hozzárendelve.
2. módszer: Tér hozzárendelése az y tengelyen.
A térköz a fenti módszerhez hasonlóan az y tengelyen is hozzárendelhető, a fenti kód kis változtatásával. Szóközöket rendel az y tengely mentén (fent és lent). Ennek szintaxisa a következő:
Az alábbi kód megvalósítható szóközök hozzáadásához az y tengely mentén:
< test >< div osztály = 'mx-4 my-4 space-y-4' >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div osztály = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
test >
Ebben a kódban:
- ' mx-4 ” 4 képpontos margót ad az elemek bal és jobb oldalán, hogy a kimenet optimalizáltabb legyen.
- ' én-4 ” 4 képpontos margót ad az y tengelyen (fent és alul).
- ' space-y-4 ” 4 képpontos helyet ad az y tengelyen (fent és alul).
Kimenet
Mentse el a fenti kódot, és tekintse meg az általa létrehozott weboldal előnézetét, hogy lássa a szóközt:
Ez annyit jelent, hogy egyenlő helyet kell kijelölni az elemek között.
Következtetés
Ha a Tailwindben több elem között egyenlő helyet szeretne rendelni, a felhasználók használhatják a „ szóköz-{x/y}-{size} ” hasznossági osztályt, és méretként adjon meg egy egész értéket a követelménynek megfelelően. Az elemek közötti egyenlő távolság skálázhatóbbá teszi a kimenetet, és a nézők továbbra is érdeklődnek a weboldal iránt. Ez a bejegyzés megadta a módszert arra, hogy egyenlő helyet rendeljen több elem között a Tailwindben.