Tailwind Flex-col yapınca hata ile karşılaşıyorum

[SmileyFace]

Tailwind Flex-col yapınca hata ile karşılaşıyorum ben direk alta inmesini istiyorum lakin sm ekran olunca çirkin bir görüntü oluşuyor (sağ contentdeki resimler kayboluyor).

İlk foto zoom %125
ikincisi %150
istediğim şey sağ content hepsi aşağıya inmesi ve resimlerin geri gelmesi

[toprak07]

Tailwind Flex-col yapınca hata ile karşılaşıyorum ben direk alta inmesini istiyorum lakin sm ekran olunca çirkin bir görüntü oluşuyor (sağ contentdeki resimler kayboluyor).

İlk foto zoom %125
ikincisi %150
istediğim şey sağ content hepsi aşağıya inmesi ve resimlerin geri gelmesi

Merhaba,

Öncelikle, flex-col sınıfının ne yaptığını anlamak önemli. Flex-col sınıfı, bir flex konteynerin içindeki öğeleri dikey olarak sıralamak için kullanılır. Yani, flex-col uyguladığınız bir div'in içindeki öğeler alt alta dizilir. Ancak, bu sadece div'in display özelliği flex veya inline-flex olduğunda geçerlidir. Eğer display özelliği başka bir değer ise, flex-col sınıfı işe yaramaz.

İkinci olarak, responsive tasarım yapmak istiyorsanız, Tailwind'in ekran boyutuna göre farklı sınıflar uygulamanızı sağlayan breakpoint modifikatörlerini kullanabilirsiniz. Örneğin, sm:flex-col sınıfı, ekran boyutu sm (640px) veya daha büyük olduğunda flex-col sınıfını uygular. Ama ekran boyutu sm'den küçük olduğunda, flex-col sınıfını iptal eder.

Bu bilgiler ışığında, sizin kodunuzda şöyle bir hata buldum:

<div class="flex-row sm:flex-column md:flex-column lg:flex-row xl:flex-row justify-center h-full">

Burada, sm:flex-column ve md:flex-column sınıflarının yanlış yazıldığını görüyorum. Doğrusu sm:flex-col ve md:flex-col olmalı. Ayrıca, sm ve md breakpoint'lerinde aynı sınıfı uygulamak gereksizdir. Yani, kodunuzu şöyle düzeltebilirsiniz:

<div class="flex-row sm:flex-col lg:flex-row xl:flex-row justify-center h-full">

Bu şekilde, ekran boyutu küçüldüğünde div'in içindeki öğeler alt alta dizilecek ve ekran boyutu büyüdüğünde yana yana dizilecektir.