Tailwind CSS, çeşitli ' hizalama öğeleri ” kabın çapraz ekseni boyunca esnek ve ızgara öğelerinin konumunu kontrol etmek için yardımcı programlar. Bu yardımcı sınıflar arasında 'items-start', 'items-center', 'items-end', 'items-baseline' ve 'items-stretch' bulunur. Ayrıca kullanıcılar, farklı ekran boyutlarında kabın çapraz ekseni boyunca esnek veya ızgara öğesinin konumunu değiştirmek için 'items-
Bu makale, Tailwind'deki 'align-items' yardımcı programlarında kesme noktaları ve medya sorguları uygulama yöntemini gösterecektir.
Tailwind'de “align-items” İle Kesme Noktaları ve Medya Sorguları Nasıl Uygulanır?
Tailwind'deki 'haklı içerik' yardımcı programlarında istenen kesme noktalarını ve medya sorgularını uygulamak için bir HTML yapısı oluşturun. Bundan sonra, belirli değeri “ olarak tanımlayın. öğeler-
Örnek
Bu örnekte, 'items-start' özelliğine sahip esnek bir kap oluşturacağız. “ md kesme noktası ile “ ürün merkezi 'fayda ve' lg kesme noktası ile “ ürün sonu ' yardımcı programı ' Çıktı Tailwind'deki 'align-items' yardımcı programlarıyla kesme noktaları ve medya sorguları uygulamak için istenen değeri ' öğeler-
< vücut >
< div sınıf = 'esnek öğeler-başlat md:items-center lg:items-end yasla-metin-merkez h-44 m-3 bg-pembe-300 boşluk-4' >
< div sınıf = 'bg-pembe-600 py-4 w-40' > 1 div >
< div sınıf = 'bg-pembe-600 py-12 w-40' > 2 div >
< div sınıf = 'bg-pembe-600 py-8 w-40' > 3 div >
div >
vücut >
Burada:
Yukarıdaki çıktı, ekran boyutu değiştikçe esnek öğelerin dikey hizalamasının değiştiğini gösterir. Bu, belirtilen kesme noktalarının ve medya sorgularının 'align-items' yardımcı programıyla etkili bir şekilde uygulandığını gösterir. Çözüm