Flex yönünde daraltmayı flex-shrink ile kontrol etmek

Bu öğreticide, CSS özelliği modifikatörü olan flex-shrink ile ilgileneceğiz. Bu seçenek, esnek düzenler oluşturmanıza olanak tanıyan Flexbox modelinin bir parçasıdır ve farklı ekran boyutlarına uyum sağlar. Önceki videoda flex-grow'ı ele almıştık, bu da elementlerin Flex Kutusu içinde nasıl büyüyebileceğini düzenlerken, bu sefer, container içindeki yer az olduğunda elementlerin nasıl küçüleceğiyle ilgili detayları göreceksiniz. Bu makalede, flex-shrink kullanarak Flexbox elementlerinin küçülmesini nasıl sınırlandırabileceğinizi veya ayarlayabileceğinizi öğreneceksiniz.

Önemli İpuçları

• flex-shrink, yetersiz alan olduğunda bir öğenin ne kadar küçülebileceğini belirler.
• flex-shrink'ün varsayılan değeri 1'dir, yani bir öğenin yer kaplayabileceği ve diğer öğelerin konteyner içinde nasıl tanımlandığına bağlı olarak genişleyebileceklerdir.
• Bir dizi öğe arasındaki küçülme oranını belirlemek için flex-shrink kullanabilirsiniz.

Adım adım Kılavuz

Aşağıda flex-shrink'ı en iyi nasıl kullanacağınızı açıklıyor olacağım. Her adımı, daha sonra video ekran görüntülerini değiştirebileceğiniz ekran görüntü değişkenleriyle vereceğim.

İlk olarak, CSS'de temel bir Flexbox uygulaması göreceksiniz. 100 piksel flex-basis'e sahip üç öğeniz var. Eğer Flex Kutusu'nda yeterli alan varsa, her şey planlandığı gibi kalır.

Ardından, konteynerin yüksekliğini 200 piksele düşürüyoruz. Bu durumda, gereken alan, konteynerin yüksekliğinden fazladır. Öğeler hala 100 piksel flex-basis'e sahiptir ve bu nedenle küçülememektedir, çünkü flex-shrink'ı 0 olarak ayarladık.

Küçülme mekanizmasını etkinleştirmek için, flex-shrink değerini değiştirin. Nav öğesi için 1 olarak ayarlayarak CSS'e, nav öğesinin maksimum küçülmesi gerektiğini belirtmiş olursunuz.

Şimdi değişikliklerinizi kaydedin ve nav öğesinin oransal olarak nasıl küçüldüğünü göreceksiniz, içeriğin belirlediği minimum yüksekliğe kadar.

Tüm öğelerin eşit şekilde küçülmesini istiyorsanız, tüm öğeler için flex-shrink'ı 1 olarak ayarlayın. Artık konteyner ihtiyaç duyulan alanın altına düştüğünde, tüm öğeler aynı oranda küçülecektir.

Şimdi, farklı flex-shrink değerlerinin düzen üzerinde nasıl etkili olduğunu özetlemek için 1:1:2 gibi bir oran seçin. Bu durumda, ana alan en büyük küçülme payını alacakken, diğer öğeler daha küçük paylar alacaklar.

Bu, ana öğenin alan eksikliğinde daha fazla yer kaplayacağı veya daha az yer gerektireceği anlamına gelir. Ancak tüm öğeler için ezici bir düzen ayarı isterseniz, flex-shrink'ı tüm öğeler için aynı değere ayarlayabilirsiniz.

Son olarak, flex-grow, flex-shrink ve flex-basis değerlerini bir araya getirerek, CSS'de düzen oluştururken daha fazla esneklik sağlayan bir bileşimi oluşturabilir ve her zaman tasarım gereksinimlerinize uygun olduğundan emin olabilirsiniz.

Özet

Bu öğreticide, Flexbox elementlerinin boyut değişikliğini kontrol etmek için CSS'de flex-shrink kullanmayı öğrendiniz. Küçülmeyi tanımlamanın çeşitli yollarını ve bunların düzene nasıl etki ettiğini öğrendiniz.