A Tailwind CSS-ben a „ közötti térköz ” segédprogramok a flex vagy grid konténerek gyermekelemei közötti tér szabályozására szolgálnak. Különféle osztályokat kínál, például „space-x-
Ez az útmutató példát mutat be a negatív térérték használatára a Tailwindben.
Hogyan használjunk negatív térértéket a hátszélben?
Ha negatív szóközértéket szeretne használni a Tailwindben, először készítsen egy HTML-struktúrát. Ezután használja a kötőjelet ' – ” a kívánt „szóközzel” a hasznossági osztályok között, hogy negatív értékké konvertálja. A ' -space-x-<érték> ” és „ -space-y-<érték> ” segédprogramokat gyakran arra használják, hogy egy elemet egy másik elembe helyezzenek.
Nézzük végig az alábbi példákat, hogy jobban megértsük.
1. példa: Negatív vízszintes térköz alkalmazása az elemek között
Ebben a példában van egy rugalmas tárolónk néhány gyermek elemmel egy sorban. A ' -space-x-8 ” osztály a flex elemek közötti negatív vízszintes távolság alkalmazásához:
< test >< div osztály = 'flex -space-x-8 m-10 h-20 w-max' >
< div osztály = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div osztály = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div osztály = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div osztály = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div osztály = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div osztály = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
test >
Itt, a szülők
-
- ' Flex ” osztály rugalmas elrendezést hoz létre.
- ' -space-x-8 ” osztály 8 egység negatív vízszintes távolságot ad a tartályon belüli flex elemek között.
- ' m-10 ” osztály 10 egységnyi margót ad a tároló minden oldalára.
- ' h-20 ” osztály a konténer magasságát 20 egységre állítja be.
- ' w-max ” osztály a tároló szélességét a maximális tartalomszélességre állítja.
A gyermek
-
- ' bg-teal-500 ” osztály a flex elemek hátterét kékeszöldre állítja.
- ' w-20 ” osztály az egyes flexelemek szélességét 20 egységre állítja be.
- ' p-5 ” osztály 5 egység párnázást ad minden egyes rugalmas elem minden oldalához.
- ' határ-2 ” osztály a tároló szegélyszélességét 2 egységre állítja be.
- ' határ-kék-800 ” osztály kékeszöld színt alkalmaz a szegélyre.
Kimenet
A fenti kimenet azt mutatja, hogy a flex elemek átfedik egymást. Ez azt jelzi, hogy a negatív vízszintes térérték alkalmazása sikeresen megtörtént.
2. példa: Negatív függőleges térköz alkalmazása az elemek között
Ebben a példában van egy rugalmas tárolónk néhány gyermek elemmel egy oszlopban. A ' -space-y-7 ” osztály a flex elemek közötti negatív függőleges távolság alkalmazásához:
< test >< div osztály = 'flex flex-col -space-y-7 m-10 text-center' >
< div osztály = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div osztály = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div osztály = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div osztály = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
test >
Itt:
-
- ' Flex ” osztály rugalmas elrendezést hoz létre.
- ' flex-col ” osztály a flex elemeket függőleges irányban igazítja.
- ' -space-y-5 ” osztály 7 egység negatív függőleges távolságot ad a tartályon belüli flex elemek között.
- ' m-10 ” osztály 10 egységnyi margót ad a tároló minden oldalára.
- ' szövegközpont ” osztály középre igazítja a tároló szövegét.
Kimenet
Látható, hogy a flex elemek átfedik egymást. Ez azt jelzi, hogy a negatív függőleges térérték alkalmazása sikeresen megtörtént.
Következtetés
Ha negatív szóközértéket szeretne használni a Tailwindben, használja a „ -space-x-<érték> ” és „ -space-y-<érték> ” segédprogramok a kívánt flex- vagy grid-tárolóval a HTML-struktúrában. Ezeket a segédprogramokat gyakran arra használják, hogy egy elemet egy másik elembe helyezzenek. Ez az útmutató példát mutat be a negatív térérték használatára a Tailwindben.