Merhaba arkadaşlar, bugün CSS Flexbox ile uğraşırken benim de kafamı bir hayli karıştıran, flex-basis değerinin 0 ve auto olması durumunda, flex-grow ve flex-shrink özelliklerinin nasıl farklı davrandığını anlatacağım. Özellikle responsive tasarım yaparken, item'ların beklenmedik şekilde büyüyüp küçülmesi canımı sıkıyordu. İşte bu gizemi çözdüğüm o an!
Sorunun Kökeni Nedir?
Flex container'ımın genişliği sabit değil, mesela yüzde cinsinden veya viewport'a göre değişiyordu. İçindeki flex item'larına da flex: 1 gibi kısa yazılımlar veriyordum. Ancak bazen item'lar içeriklerine göre, bazen de eşit şekilde dağılmıyordu. İşin sırrı, flex: 1 yazmanın aslında flex: 1 1 0 anlamına gelmesinde yatıyor. Yani flex-basis: 0. Peki ya flex-basis: auto olsaydı?
Temel Farkı Anlamak
Bu iki değer arasındaki en kritik fark, başlangıç boyutunun (initial main size) nasıl hesaplandığı. Hemen basit bir örnekle gösterelim.
Diyelim ki 400px genişliğinde bir container'ımız ve içinde iki div'imiz var.
Durum 1: flex-basis: 0 (flex: 1)
Bu durumda, item'ların başlangıç boyutu 0 kabul edilir. Kalan boş alan (positive free space) flex-grow değerleri oranında paylaştırılır. İçerik boyutu bu hesaplamada dikkate alınmaz, sadece büyüme faktörüne bakılır.
Sonuç: Her iki item da tam olarak 200px genişliğinde olur. İçlerindeki yazı uzun olsa bile, bu 400px'lik pastayı eşit bölerler. Büyüme, sıfır noktasından başlar.
Durum 2: flex-basis: auto (flex: 1 1 auto)
Bu durumda ise, item'ların başlangıç boyutu içeriğinin (content) genişliği kadardır. Önce bu boyutlar hesaplanır, sonra kalan boş alan (veya taşma durumunda negative free space) grow/shrink değerlerine göre dağıtılır.
Diyelim ki birinci item'ın içeriği 150px, ikincininki 50px genişliğinde olsun. Toplam 400px - (150+50) = 200px boşluk kalır. Bu 200px boşluk, her iki item'a da flex-grow: 1 olduğu için eşit olarak (100'ar px) dağıtılır.
Sonuç: Birinci item = 150 + 100 = 250px. İkinci item = 50 + 100 = 150px. Büyüme, kendi içerik boyutlarından başlar.
Hangi Durumda Hangisini Kullanmalı?
flex-basis: 0 (flex: 1) kullanmak istediğiniz zaman:
Tüm item'ların kesinlikle eşit boyutta olmasını istediğinizde. (Örnek: dashboard kartları, eşit kolonlu grid'ler)
İçerik boyutunun dağılımı etkilemesini istemiyorsanız.
flex-basis: auto (flex: 1 1 auto) kullanmak istediğiniz zaman:
Item'ların içeriklerine göre bir esneme yapmasını istediğinizde.
Bazı item'ların daha fazla içeriği olduğunda, ona göre daha fazla (orantılı olarak) yer kaplamasını istediğinizde.
min-content veya max-content gibi davranışlara daha yakın bir esneklik istediğinizde.
Peki Siz Ne Yapıyorsunuz?
Ben genellikle tamamen eşit dağılım istediğim kart yapılarında flex: 1 (flex-basis: 0) kullanıyorum. Ancak, içinde farklı uzunlukta metinler veya ikonlar olan bir menü çubuğu yapıyorsam, daha organik bir genişleme için flex: 1 1 auto tercih ediyorum. Sizin tecrübeleriniz neler? Flexbox'ta büyüme/küçülme hesaplamalarında en çok hangi senaryoda takılıyorsunuz? Yorumlarda buluşalım!
Sorunun Kökeni Nedir?Flex container'ımın genişliği sabit değil, mesela yüzde cinsinden veya viewport'a göre değişiyordu. İçindeki flex item'larına da flex: 1 gibi kısa yazılımlar veriyordum. Ancak bazen item'lar içeriklerine göre, bazen de eşit şekilde dağılmıyordu. İşin sırrı, flex: 1 yazmanın aslında flex: 1 1 0 anlamına gelmesinde yatıyor. Yani flex-basis: 0. Peki ya flex-basis: auto olsaydı?
Temel Farkı AnlamakBu iki değer arasındaki en kritik fark, başlangıç boyutunun (initial main size) nasıl hesaplandığı. Hemen basit bir örnekle gösterelim.
Diyelim ki 400px genişliğinde bir container'ımız ve içinde iki div'imiz var.
CSS:
.container {
display: flex;
width: 400px;
border: 2px solid #2C3E50;
}
.item {
padding: 10px;
border: 1px solid #3498DB;
}Bu durumda, item'ların başlangıç boyutu 0 kabul edilir. Kalan boş alan (positive free space) flex-grow değerleri oranında paylaştırılır. İçerik boyutu bu hesaplamada dikkate alınmaz, sadece büyüme faktörüne bakılır.
CSS:
.item {
flex: 1; / flex: 1 1 0 /
}Sonuç: Her iki item da tam olarak 200px genişliğinde olur. İçlerindeki yazı uzun olsa bile, bu 400px'lik pastayı eşit bölerler. Büyüme, sıfır noktasından başlar.
Durum 2: flex-basis: auto (flex: 1 1 auto)Bu durumda ise, item'ların başlangıç boyutu içeriğinin (content) genişliği kadardır. Önce bu boyutlar hesaplanır, sonra kalan boş alan (veya taşma durumunda negative free space) grow/shrink değerlerine göre dağıtılır.
CSS:
.item {
flex: 1 1 auto;
}Diyelim ki birinci item'ın içeriği 150px, ikincininki 50px genişliğinde olsun. Toplam 400px - (150+50) = 200px boşluk kalır. Bu 200px boşluk, her iki item'a da flex-grow: 1 olduğu için eşit olarak (100'ar px) dağıtılır.
Sonuç: Birinci item = 150 + 100 = 250px. İkinci item = 50 + 100 = 150px. Büyüme, kendi içerik boyutlarından başlar.
Hangi Durumda Hangisini Kullanmalı?flex-basis: 0 (flex: 1) kullanmak istediğiniz zaman:
Tüm item'ların kesinlikle eşit boyutta olmasını istediğinizde. (Örnek: dashboard kartları, eşit kolonlu grid'ler)
İçerik boyutunun dağılımı etkilemesini istemiyorsanız.
flex-basis: auto (flex: 1 1 auto) kullanmak istediğiniz zaman:
Item'ların içeriklerine göre bir esneme yapmasını istediğinizde.
Bazı item'ların daha fazla içeriği olduğunda, ona göre daha fazla (orantılı olarak) yer kaplamasını istediğinizde.
min-content veya max-content gibi davranışlara daha yakın bir esneklik istediğinizde.
Peki Siz Ne Yapıyorsunuz?Ben genellikle tamamen eşit dağılım istediğim kart yapılarında flex: 1 (flex-basis: 0) kullanıyorum. Ancak, içinde farklı uzunlukta metinler veya ikonlar olan bir menü çubuğu yapıyorsam, daha organik bir genişleme için flex: 1 1 auto tercih ediyorum. Sizin tecrübeleriniz neler? Flexbox'ta büyüme/küçülme hesaplamalarında en çok hangi senaryoda takılıyorsunuz? Yorumlarda buluşalım!