Tailwind CSS-is on ' ruumi vahel ” utiliite kasutatakse painduvate või võrekonteinerite alamelementide vahelise ruumi juhtimiseks. See pakub erinevaid klasse, nagu 'space-x-
See juhend kirjeldab negatiivse tühiku väärtuse kasutamise meetodit Tailwindis.
Kuidas kasutada negatiivset ruumi väärtust Tailwindis?
Negatiivse tühiku väärtuse kasutamiseks Tailwindis looge esmalt HTML-struktuur. Seejärel kasutage kriipsu ' – ' koos soovitud 'tühikuga' kasuliku klasside vahel, et teisendada see negatiivseks väärtuseks. ' -tühik-x-
Vaatame allolevaid näiteid, et seda paremini mõista.
Näide 1: rakendage elementide vahele negatiivset horisontaalset vahekaugust
Selles näites on meil painduv konteiner, kus on reas mõned alamelemendid. Me kasutame ' -Tühik-x-8 ” klass, et rakendada negatiivset horisontaalset vahekaugust paindeelementide vahel:
< keha >< div klass = 'flex -space-x-8 m-10 h-20 w-max' >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klass = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
keha >
Siin, vanemate
-
- “ painduv ” klass loob paindliku paigutuse.
- “ -Tühik-x-8 ” klass lisab mahutis painduvate elementide vahele 8 ühikut negatiivset horisontaalset vahekaugust.
- “ m-10 ” klass lisab konteineri kõikidele külgedele 10 ühiku suuruse varu.
- “ h-20 ” klass määrab konteineri kõrguseks 20 ühikut.
- “ w-max ” klass määrab konteineri laiuseks selle maksimaalse sisulaiuse.
Alamelementides
-
- “ bg-teal-500 ” klass seab flex-elementide tausta sinakaspruuniks.
- “ w-20 ” klass määrab iga painduva elemendi laiuseks 20 ühikut.
- “ p-5 ” klass lisab iga painduva eseme kõikidele külgedele 5 ühikut polsterdust.
- “ piir-2 ” klass määrab konteineri äärise laiuseks 2 ühikut.
- “ piir-sinine-800 ” klass rakendab äärisele sinakaspruuni värvi.
Väljund
Ülaltoodud väljund näitab, et painduvad elemendid kattuvad. See näitab, et negatiivse horisontaalse tühiku väärtus on edukalt rakendatud.
Näide 2: rakendage elementide vahel negatiivset vertikaalset vahet
Selles näites on meil painduv konteiner, mille veerus on mõned alamelemendid. Me kasutame ' -Tühik-y-7 ” klass, et rakendada painduvate elementide vahel negatiivset vertikaalset vahekaugust:
< keha >< div klass = 'flex flex-col -space-y-7 m-10 text-center' >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klass = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
keha >
Siin:
-
- “ painduv ” klass loob paindliku paigutuse.
- “ flex-col ” klass joondab painduvad elemendid vertikaalsuunas.
- “ -tühik-y-5 ” klass lisab mahutis painduvate elementide vahele 7 ühikut negatiivset vertikaalset vahekaugust.
- “ m-10 ” klass lisab konteineri kõikidele külgedele 10 ühiku suuruse varu.
- “ tekstikeskus ” klass joondab konteineri teksti keskele.
Väljund
On näha, et painduvad elemendid kattuvad. See näitab, et negatiivse vertikaalse tühiku väärtus on edukalt rakendatud.
Järeldus
Tailwindis negatiivse tühiku väärtuse kasutamiseks kasutage ' -tühik-x-