In Tailwind CSS wordt de “ ruimte tussen Hulpprogramma's worden gebruikt om de ruimte tussen onderliggende elementen van flex- of grid-containers te controleren. Het biedt verschillende klassen, zoals “space-x-
Deze handleiding illustreert de methode voor het gebruik van een negatieve spatiewaarde in Tailwind.
Hoe gebruik je een negatieve ruimtewaarde in staartwind?
Om een negatieve spatiewaarde in Tailwind te gebruiken, moet u eerst een HTML-structuur maken. Gebruik dan het streepje “ – ” met de gewenste “ruimte tussen” nutsklassen om deze naar een negatieve waarde om te zetten. De ' -spatie-x-
Laten we de onderstaande voorbeelden doornemen om het beter te begrijpen.
Voorbeeld 1: Pas een negatieve horizontale afstand tussen elementen toe
In dit voorbeeld hebben we een flexcontainer met enkele onderliggende elementen op een rij. Wij zullen gebruik maken van de “ -spatie-x-8 ” klasse om de negatieve horizontale afstand tussen flexibele elementen toe te passen:
< lichaam >< div klas = 'flex -ruimte-x-8 m-10 h-20 w-max' >
< div klas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
lichaam >
Hier, in het parent-element
-
- “ buigen ” class zorgt voor een flexibele indeling.
- “ -spatie-x-8 ”-klasse voegt 8 eenheden negatieve horizontale afstand toe tussen flex-elementen binnen een container.
- “ m-10 ”-klasse voegt een marge van 10 eenheden toe aan alle zijden van de container.
- “ u-20 ”-klasse stelt de hoogte van de container in op 20 eenheden.
- “ w-max De klasse stelt de breedte van de container in op de maximale inhoudsbreedte.
In de onderliggende
-
- “ bg-groenblauw-500 '-klasse zet de achtergrond van flex-elementen op groenblauw.
- “ w-20 ”-klasse stelt de breedte van elk flexitem in op 20 eenheden.
- “ p-5 ”-klasse voegt 5 eenheden vulling toe aan alle zijden van elk flex-item.
- “ grens-2 ”-klasse stelt de randbreedte van de container in op 2 eenheden.
- “ border-taling-800 '-klasse past blauwgroen kleur toe op de rand.
Uitvoer
Uit de bovenstaande uitvoer blijkt dat de flex-elementen elkaar overlappen. Dit geeft aan dat de negatieve waarde voor de horizontale ruimte met succes is toegepast.
Voorbeeld 2: Pas een negatieve verticale afstand tussen elementen toe
In dit voorbeeld hebben we een flexcontainer met enkele onderliggende elementen in een kolom. Wij zullen gebruik maken van de “ -spatie-y-7 ” klasse om de negatieve verticale afstand tussen flexibele elementen toe te passen:
< lichaam >< div klas = 'flex flex-col -spatie-y-7 m-10 tekst-midden' >
< div klas = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klas = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klas = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klas = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
lichaam >
Hier:
-
- “ buigen ” class zorgt voor een flexibele indeling.
- “ flex-kol ” klasse lijnt de flexitems in verticale richting uit.
- “ -spatie-y-5 ”-klasse voegt 7 eenheden negatieve verticale afstand toe tussen flex-elementen binnen een container.
- “ m-10 ”-klasse voegt een marge van 10 eenheden toe aan alle zijden van de container.
- “ tekst-centrum ” klasse lijnt de tekst van de container uit in het midden.
Uitvoer
Het is te zien dat de flexelementen elkaar overlappen. Dit geeft aan dat de negatieve verticale ruimtewaarde met succes is toegepast.
Conclusie
Om een negatieve spatiewaarde in Tailwind te gebruiken, gebruikt u de “ -spatie-x-