Bu yazı, Tailwind CSS'de esnek öğelerin büyümesini veya küçülmesini önleme yöntemini örnekleyecektir.
Tailwind'de Esnek Öğelerin Büyümesi veya Küçülmesi Nasıl Önlenir?
Tailwind'de esnek öğelerin büyüyüp küçülmesini önlemek için HTML dosyasını oluşturun. Ardından, “ esnek-büyüme-0 ' Ve ' flex-shrink-0 ” HTML programındaki belirli esnek öğelerle yardımcı programlar. Bu yardımcı programlar, esnek öğelerin esnek kap içindeki alana göre büyümesine veya küçülmesine izin vermez. Bundan sonra, değişiklikleri sağlamak için HTML web sayfasının ekran boyutunu ayarlayın.
Pratik uygulaması için sağlanan adımları izleyin:
1. Adım: Flex Öğelerinin HTML Programında Büyüyüp Küçülmesini Önleyin
Bir HTML programı yapın ve “ esnek-büyüme-0 ' Ve ' flex-shrink-0 ”büyümelerini veya küçülmelerini önlemek için istenen esnek öğelere sahip yardımcı programlar:
< vücut >
< div sınıf = 'esnek h-20' >
< div sınıf = 'flex-grow-0 bg-sarı-500 w-40 m-1' > 1 < / div >
< div sınıf = 'flex-shrink-0 bg-fuşya-500 w-40 m-1' > 2 < / div >
< div sınıf = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div sınıf = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / vücut >
Burada:
- “ esnek-büyüme-0 ” sınıfı, esnek öğenin, boş alan olduğunda esnek kapsayıcı içinde büyümesini ve fazladan yer kaplamasını engeller.
- “ flex-shrink-0 ” sınıfı, alan yetersiz olduğunda esnek öğenin esnek kap içinde küçülmesini ve küçülmesini engeller.
- “ esnek büyümek ” sınıfı, esnek öğenin esnek kap içinde mevcut alanı büyütmesine ve işgal etmesine izin verir.
- “ esnek-büzülme ” sınıfı, esnek kap içinde yeterli alan yoksa esnek öğenin küçülmesine izin verir.
2. Adım: Çıktıyı Doğrulayın
İstenen esnek öğelerin büyümesinin ve küçülmesinin engellendiğinden emin olmak için HTML web sayfasını görüntüleyin ve ekran boyutunu değiştirin:
Yukarıdaki çıktı, “2” esnek öğesinin yetersiz alanda küçülmediğini ve “1” öğesinin mevcut alanda büyümediğini göstermektedir. Bu, istenen flex öğelerin büyüyüp küçülmesinin engellendiğini gösterir.
Çözüm
Tailwind'de esnek öğelerin büyüyüp küçülmesini önlemek için ' esnek-büyüme-0 ' Ve ' flex-shrink-0 ” HTML programında istenen esnek öğelerle yardımcı programlar. Doğrulama için, HTML web sayfasının ekran boyutunu değiştirin ve görüntüleyin. Bu yazı, Tailwind CSS'de esnek öğelerin büyümesini veya küçülmesini önleme yöntemini örneklemiştir.