Tailwind CSS'de “ arasındaki boşluk ” yardımcı programlar, esnek veya ızgara kapların alt öğeleri arasındaki boşluğu kontrol etmek için kullanılır. Alt öğeler arasındaki yatay ve dikey boşluğu sırasıyla uygulamak için “boşluk-x-
Bu kılavuz, Tailwind'de negatif alan değeri kullanma yöntemini örneklendirecektir.
Tailwind'de Negatif Alan Değeri Nasıl Kullanılır?
Tailwind'de negatif boşluk değeri kullanmak için öncelikle bir HTML yapısı oluşturun. Ardından kısa çizgiyi kullanın ' – Negatif bir değere dönüştürmek için istenen 'aradaki boşluk' yardımcı program sınıflarıyla birlikte. “ -boşluk-x-
Daha iyi anlamak için aşağıdaki örnekleri inceleyelim.
Örnek 1: Öğeler Arasına Negatif Yatay Aralık Uygulayın
Bu örnekte, bazı alt öğelerin sıralandığı esnek bir kabımız var. ' ifadesini kullanacağız. -boşluk-x-8 Esnek öğeler arasındaki negatif yatay aralığı uygulamak için 'sınıfı':
< vücut >< div sınıf = 'esnek -boşluk-x-8 m-10 sa-20 w-maks' >
< div sınıf = 'bg-teal-500 w-20 p-5 kenarlık-2 kenar-teal-800' > 1 div >
< div sınıf = 'bg-teal-500 w-20 p-5 kenarlık-2 kenar-teal-800' > 2 div >
< div sınıf = 'bg-teal-500 w-20 p-5 kenarlık-2 kenar-teal-800' > 3 div >
< div sınıf = 'bg-teal-500 w-20 p-5 kenarlık-2 kenar-teal-800' > 4 div >
< div sınıf = 'bg-teal-500 w-20 p-5 kenarlık-2 kenar-teal-800' > 5 div >
< div sınıf = 'bg-teal-500 w-20 p-5 kenarlık-2 kenar-teal-800' > 6 div >
div >
vücut >
Burada ebeveyn
-
- “ esnek ” sınıfı esnek bir düzen oluşturur.
- “ -boşluk-x-8 ” sınıfı, bir konteyner içindeki esnek elemanlar arasına 8 birim negatif yatay boşluk ekler.
- “ m-10 ” sınıfı konteynerin her tarafına 10 birim kenar boşluğu ekler.
- “ sa-20 ” sınıfı konteynerin yüksekliğini 20 birime ayarlar.
- “ w-max ” sınıfı, kabın genişliğini maksimum içerik genişliğine ayarlar.
Alt
-
- “ bg-teal-500 ” sınıfı, esnek öğelerin arka planını deniz mavisine ayarlar.
- “ w-20 ” sınıfı her esnek öğenin genişliğini 20 birime ayarlar.
- “ s-5 ” sınıfı, her esnek öğenin her tarafına 5 birim dolgu ekler.
- “ sınır-2 ” sınıfı, konteynerin kenar genişliğini 2 birime ayarlar.
- “ kenar-teal-800 ” sınıfı kenarlığa deniz mavisi rengi uygular.
Çıktı
Yukarıdaki çıktı esnek elemanların üst üste bindiğini göstermektedir. Bu, negatif yatay alan değerinin başarıyla uygulandığını gösterir.
Örnek 2: Öğeler Arasına Negatif Dikey Aralık Uygulayın
Bu örnekte, bir sütunda bazı alt öğelerin bulunduğu esnek bir kabımız var. ' ifadesini kullanacağız. -boşluk-y-7 Esnek elemanlar arasındaki negatif dikey aralığı uygulamak için 'sınıfı:
< vücut >< div sınıf = 'flex flex-col -space-y-7 m-10 metin merkezi' >
< div sınıf = 'bg-teal-500 p-5 kenarlık-2 kenar-teal-800' > 1 div >
< div sınıf = 'bg-teal-500 p-5 kenarlık-2 kenar-teal-800' > 2 div >
< div sınıf = 'bg-teal-500 p-5 kenarlık-2 kenar-teal-800' > 3 div >
< div sınıf = 'bg-teal-500 p-5 kenarlık-2 kenar-teal-800' > 4 div >
div >
vücut >
Burada:
-
- “ esnek ” sınıfı esnek bir düzen oluşturur.
- “ esnek sütun ” sınıfı esnek öğeleri dikey yönde hizalar.
- “ -boşluk-y-5 ” sınıfı, bir konteyner içindeki esnek elemanlar arasına 7 birim negatif dikey aralık ekler.
- “ m-10 ” sınıfı konteynerin her tarafına 10 birim kenar boşluğu ekler.
- “ metin merkezi ” sınıfı kabın metnini merkeze hizalar.
Çıktı
Esnek elemanların üst üste bindiği görülebilir. Bu, negatif dikey alan değerinin başarıyla uygulandığını gösterir.
Çözüm
Tailwind'de negatif boşluk değeri kullanmak için ' -boşluk-x-