Tailwind CSS:ssä ' väliin ” apuohjelmia käytetään ohjaamaan flex- tai grid-säiliöiden lapsielementtien välistä tilaa. Se tarjoaa erilaisia luokkia, kuten 'välilyönti-x-
Tämä opas on esimerkki negatiivisen tila-arvon käyttämisestä Tailwindissä.
Kuinka käyttää negatiivista tila-arvoa Tailwindissä?
Jos haluat käyttää negatiivista välilyöntiarvoa Tailwindissä, luo ensin HTML-rakenne. Käytä sitten viivaa ' – ' halutulla 'välillä' hyödyllisyysluokilla muuntaaksesi sen negatiiviseksi arvoksi. ' -välilyönti-x-
Käydään läpi alla olevat esimerkit ymmärtääksemme sitä paremmin.
Esimerkki 1: Käytä negatiivista vaakaväliä elementtien väliin
Tässä esimerkissä meillä on joustava säiliö, jossa on peräkkäin joitain alielementtejä. Käytämme ' -välilyönti x-8 ” luokka soveltaa negatiivista vaakaväliä joustoelementtien välillä:
< kehon >< div luokkaa = 'flex -space-x-8 m-10 k-20 w-max' >
< div luokkaa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div luokkaa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div luokkaa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div luokkaa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div luokkaa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div luokkaa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
kehon >
Tässä vanhempien
-
- ' flex ”-luokka luo joustavan ulkoasun.
- ' -välilyönti x-8 ” luokka lisää 8 yksikköä negatiivista vaakaväliä joustoelementtien väliin säiliön sisällä.
- ' m-10 ” luokka lisää 10 yksikön marginaalia kontin jokaiselle sivulle.
- ' h-20 ” luokka asettaa kontin korkeudeksi 20 yksikköä.
- ' w-max ” luokka asettaa säilön leveyden sen enimmäissisältöleveyteen.
Alatason
-
- ' bg-teal-500 ” luokka asettaa flex-elementtien taustan sinivihreäksi.
- ' w-20 ” luokka asettaa jokaisen flex-tuotteen leveydeksi 20 yksikköä.
- ' p-5 ” luokka lisää 5 yksikköä pehmustetta jokaiselle flex-tuotteelle.
- ' raja-2 ” luokka asettaa säiliön reunan leveydeksi 2 yksikköä.
- ' border-teal-800 ” luokka soveltaa reunukseen sinivihreää väriä.
Lähtö
Yllä oleva tulos osoittaa, että joustoelementit menevät päällekkäin. Tämä osoittaa, että negatiivisen vaakatilan arvo on otettu käyttöön onnistuneesti.
Esimerkki 2: Käytä negatiivista pystysuuntaista etäisyyttä elementtien väliin
Tässä esimerkissä meillä on joustava säiliö, jossa on joitain alielementtejä sarakkeessa. Käytämme ' -välilyönti-y-7 ” luokka käyttää negatiivista pystysuuntaista etäisyyttä joustoelementtien välillä:
< kehon >< div luokkaa = 'flex flex-col -space-y-7 m-10 text-center' >
< div luokkaa = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div luokkaa = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div luokkaa = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div luokkaa = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
kehon >
Tässä:
-
- ' flex ”-luokka luo joustavan ulkoasun.
- ' flex-col ” luokka kohdistaa taipuiset kohteet pystysuunnassa.
- ' -välilyönti-y-5 ” luokka lisää 7 yksikköä negatiivista pystysuuntaista etäisyyttä joustoelementtien väliin säiliön sisällä.
- ' m-10 ” luokka lisää 10 yksikön marginaalia kontin jokaiselle sivulle.
- ' tekstikeskus ” luokka tasaa säilön tekstin keskelle.
Lähtö
Voidaan nähdä, että joustoelementit menevät päällekkäin. Tämä osoittaa, että negatiivisen pystytilan arvo on otettu käyttöön onnistuneesti.
Johtopäätös
Jos haluat käyttää negatiivista välilyöntiarvoa Tailwindissä, käytä ' -välilyönti-x-