I Tailwind CSS er ' mellomrom mellom ”-verktøy brukes til å kontrollere avstanden mellom underordnede elementer av flex- eller rutenettbeholdere. Den tilbyr forskjellige klasser, for eksempel 'mellomrom-x-
Denne veiledningen vil eksemplifisere metoden for å bruke en negativ plassverdi i Tailwind.
Hvordan bruke en negativ plassverdi i medvind?
For å bruke en negativ mellomromsverdi i Tailwind, lag først en HTML-struktur. Bruk deretter bindestreken ' – ” med ønsket “mellomrom” verktøyklasser for å konvertere den til en negativ verdi. « -mellomrom-x-
La oss gå gjennom eksemplene nedenfor for å forstå det bedre.
Eksempel 1: Bruk en negativ horisontal avstand mellom elementene
I dette eksemplet har vi en flexbeholder med noen underordnede elementer på rad. Vi vil bruke ' -mellomrom-x-8 ” klasse for å bruke den negative horisontale avstanden mellom flekselementer:
< kropp >< div klasse = 'flex -space-x-8 m-10 h-20 w-max' >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
kropp >
Her, i elementet foreldre
-
- ' bøye seg ” klasse skaper en fleksibel layout.
- ' -mellomrom-x-8 Klasse legger til 8 enheter negativ horisontal avstand mellom flekselementer i en beholder.
- ' m-10 ”-klassen legger til en margin på 10 enheter på alle sider av beholderen.
- ' h-20 ” klasse setter høyden på containeren til 20 enheter.
- ' w-maks ”-klassen setter beholderens bredde til dens maksimale innholdsbredde.
I underordnede
-
- ' bg-teal-500 ”-klassen setter bakgrunnen for flex-elementer til blågrønn.
- ' w-20 ” klasse setter bredden på hver flexvare til 20 enheter.
- ' s-5 ”-klassen legger til 5 enheter med polstring på alle sider av hvert flex-element.
- ' grense-2 ” klasse setter kantbredden på beholderen til 2 enheter.
- ' border-teal-800 ” klasse bruker blågrønn farge på kanten.
Produksjon
Ovennevnte utgang viser at flex-elementene overlapper hverandre. Dette indikerer at den negative horisontale mellomromsverdien har blitt brukt.
Eksempel 2: Bruk en negativ vertikal avstand mellom elementer
I dette eksemplet har vi en fleksbeholder med noen underordnede elementer i en kolonne. Vi vil bruke ' -mellomrom-y-7 ” klasse for å bruke den negative vertikale avstanden mellom flekselementer:
< kropp >< div klasse = 'flex flex-col -space-y-7 m-10 text-center' >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
kropp >
Her:
-
- ' bøye seg ” klasse skaper en fleksibel layout.
- ' flex-col ”-klassen justerer flex-elementene i vertikal retning.
- ' -mellomrom-y-5 Klasse legger til 7 enheter negativ vertikal avstand mellom flekselementer i en beholder.
- ' m-10 ”-klassen legger til en margin på 10 enheter på alle sider av beholderen.
- ' tekst-senter ”-klassen justerer teksten i beholderen til midten.
Produksjon
Det kan sees at flexelementene overlapper hverandre. Dette indikerer at den negative vertikale mellomromsverdien har blitt brukt.
Konklusjon
For å bruke en negativ mellomromsverdi i Tailwind, bruk ' -mellomrom-x-