Sa Tailwind CSS, ang “ espasyo sa pagitan ” Ang mga utility ay ginagamit upang kontrolin ang espasyo sa pagitan ng mga elemento ng bata ng mga flex o grid na lalagyan. Nag-aalok ito ng iba't ibang klase, gaya ng 'space-x-
Ipapakita ng gabay na ito ang paraan ng paggamit ng negatibong halaga ng espasyo sa Tailwind.
Paano Gumamit ng Negative Space Value sa Tailwind?
Upang gumamit ng negatibong halaga ng espasyo sa Tailwind, gumawa muna ng HTML structure. Pagkatapos, gamitin ang gitling ' – ” na may ninanais na “space between” utility classes para i-convert ito sa isang negatibong halaga. Ang ' -space-x-
Tingnan natin ang mga halimbawa sa ibaba upang mas maunawaan ito.
Halimbawa 1: Maglapat ng Negatibong Horizontal Spacing sa Pagitan ng Mga Elemento
Sa halimbawang ito, mayroon kaming nabaluktot na lalagyan na may magkakasunod na elemento ng bata. Gagamitin natin ang ' -espasyo-x-8 ” class para ilapat ang negatibong horizontal spacing sa pagitan ng mga elemento ng flex:
< katawan >< div klase = 'flex -space-x-8 m-10 h-20 w-max' >
< div klase = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klase = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klase = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klase = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klase = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klase = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
katawan >
Dito, sa mga magulang
-
- “ baluktot ” ang klase ay lumilikha ng isang flexible na layout.
- “ -espasyo-x-8 ” class ay nagdaragdag ng 8 unit ng negatibong horizontal spacing sa pagitan ng flex elements sa loob ng isang container.
- “ m-10 ” class ay nagdaragdag ng margin na 10 unit sa lahat ng panig ng lalagyan.
- “ h-20 ” class ay nagtatakda ng taas ng lalagyan sa 20 units.
- “ w-max ” klase ay nagtatakda ng lapad ng lalagyan sa maximum na lapad ng nilalaman nito.
Sa mga elemento ng child
-
- “ bg-teal-500 ” itinatakda ng klase ang background ng mga elemento ng flex sa kulay.
- “ w-20 ” class ay nagtatakda ng lapad ng bawat flex item sa 20 units.
- “ p-5 ” Nagdaragdag ang klase ng 5 unit ng padding sa lahat ng panig ng bawat flex item.
- “ hangganan-2 ” class ay nagtatakda ng lapad ng hangganan ng lalagyan sa 2 unit.
- “ border-teal-800 ” ang klase ay naglalapat ng kulay teal sa hangganan.
Output
Ang output sa itaas ay nagpapakita na ang mga flex na elemento ay magkakapatong. Ito ay nagpapahiwatig na ang negatibong pahalang na halaga ng espasyo ay matagumpay na nailapat.
Halimbawa 2: Maglapat ng Negatibong Vertical Spacing sa Pagitan ng Mga Elemento
Sa halimbawang ito, mayroon kaming flex container na may ilang child element sa isang column. Gagamitin natin ang ' -space-y-7 ” class para ilapat ang negatibong vertical spacing sa pagitan ng flex elements:
< katawan >< div klase = 'flex flex-col -space-y-7 m-10 text-center' >
< div klase = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klase = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klase = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klase = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
katawan >
dito:
-
- “ baluktot ” ang klase ay lumilikha ng isang nababaluktot na layout.
- “ flex-col ” class aligns ang flex item sa isang vertical na direksyon.
- “ -space-y-5 ” class ay nagdaragdag ng 7 unit ng negatibong vertical spacing sa pagitan ng flex elements sa loob ng isang container.
- “ m-10 ” class ay nagdaragdag ng margin na 10 unit sa lahat ng panig ng lalagyan.
- “ text-center ” class ay nakahanay sa text ng container sa gitna.
Output
Makikita na ang mga flex elements ay magkakapatong. Isinasaad nito na matagumpay na nailapat ang negatibong vertical na halaga ng espasyo.
Konklusyon
Upang gumamit ng negatibong halaga ng espasyo sa Tailwind, gamitin ang “ -space-x-