Merhaba arkadaşlar, bugün sizlere Flexbox'ın belki de en çok kafa karıştıran üç özelliğini, flex-grow, flex-shrink ve flex-basis'i nasıl somutlaştırdığımı anlatacağım. Bu üçlüyü öğrenirken ben de "Bu ne ya?" moduna girmiştim ta ki kendi mini demo'umu yapana kadar. İşte benim kullandığım en temiz öğrenme yöntemi!
Neden Bu Demo'yu Yaptım?
CSS'te flex: 1 yazıp geçmek çok kolay, değil mi? Ama arka planda ne olduğunu anlamadan, karmaşık bir layout'da işler sarpa sardığında debug etmek gerçekten can sıkıcı olabiliyor. Flex özelliği aslında bu üç değerin kısa yazımı: flex: [flex-grow] [flex-shrink] [flex-basis];. Her birinin ne işe yaradığını görsel olarak, anında feedback alarak görmek, kafamdaki tüm soru işaretlerini sildi. Sizinle paylaşmak istedim.
Temel Yapıyı Kuralım
Öncelikle, üzerinde oynama yapacağımız basit bir HTML ve CSS yapısı hazırladım. Demo'da üç adet kutumuz (item) olacak ve biz bu kutulara farklı flex değerleri atayacağız.
Flex-Basis: Başlangıç Noktası
flex-basis, bir item'ın başlangıçtaki ana boyutunu (main size) belirler. width gibi düşünebilirsiniz ama daha akıllı! Eğer container'da yer kalmazsa veya artarsa, grow ve shrink devreye girer. Şimdi ikinci item'ımıza bir başlangıç boyutu verelim.
Bu kodu yazdığınızda, Item 2'nin diğerlerinden daha geniş olduğunu göreceksiniz. İşte bu onun temel, ideal boyutu. Ama container küçülürse veya büyürse bu değer tek başına yeterli olmayacak.
Flex-Grow: Büyüme Faktörü
Container'da boş alan (positive free space) kaldığında, bu alanı item'lar arasında nasıl paylaştıracağımızı flex-grow belirler. Varsayılan değeri 0'dır, yani "hiç büyüme!". Tüm item'ların grow değerini 1 yaparsak, boş alan eşit olarak bölüşülür. Farklı değerler verirsek, orantılı olarak dağıtılır.
Hadi Item 1'in açgözlü olmasını sağlayalım!
Bu durumda, mevcut boş alan 5 parçaya bölünür (3+1+1). Item 1 bu pastanın 3/5'ini, diğerleri iser 1/5'ini alır. Container'ı büyütüp küçülterek bu etkiyi rahatça gözlemleyebilirsiniz.
Flex-Shrink: Küçülme Faktörü
flex-shrink ise tam tersi durumla, yani yetersiz alan (negative free space) ile ilgilenir. Item'ların toplam temel boyutu (flex-basis) container'dan büyükse, onların ne oranda küçüleceğini bu değer belirler. Varsayılan değeri 1'dir. Hadi Item 3'ün asla küçülmemesini isteyelim!
Container'ı daralttığınızda, Item 1 ve Item 2 küçülmeye başlayacak, ancak flex-shrink: 0 verdiğimiz Item 3, flex-basis değerinde (veya içeriğinin min-boyutunda) sabit kalacaktır. Bu, bir sidebar veya sabit genişlikli bir bileşen için harika bir tekniktir.
Hepsinin Bir Arada Kullanımı
Şimdi sihirli kısa yazıma gelelim: flex property'si. Yukarıdaki her şeyi tek satırda yazabiliriz.
flex: 1 yazdığınızda aslında arka planda flex: 1 1 0px tanımlanır. Bu, item'ların başlangıçta sıfır noktasından başlayıp, tüm boş alanı eşit bölüşerek büyümesi demektir. Artık bunun ne anlama geldiğini biliyorsunuz!
Umarım bu basit demo, sizin de kafanızı aydınlatır. Flexbox'ın bu güçlü ama karmaşık görünen özelliklerini anlamak için en iyi yöntem, bence, böyle küçük bir sandbox oluşturup değerleriyle oynamak.
Peki siz flex özelliklerini anlamak için nasıl bir yol izlediniz? flex-shrink: 0 ile sabitlediğiniz unutulmaz bir layout sorununuz oldu mu? Aşağıda deneyimlerinizi paylaşın, tartışalım!
Neden Bu Demo'yu Yaptım?CSS'te flex: 1 yazıp geçmek çok kolay, değil mi? Ama arka planda ne olduğunu anlamadan, karmaşık bir layout'da işler sarpa sardığında debug etmek gerçekten can sıkıcı olabiliyor. Flex özelliği aslında bu üç değerin kısa yazımı: flex: [flex-grow] [flex-shrink] [flex-basis];. Her birinin ne işe yaradığını görsel olarak, anında feedback alarak görmek, kafamdaki tüm soru işaretlerini sildi. Sizinle paylaşmak istedim.
Temel Yapıyı KuralımÖncelikle, üzerinde oynama yapacağımız basit bir HTML ve CSS yapısı hazırladım. Demo'da üç adet kutumuz (item) olacak ve biz bu kutulara farklı flex değerleri atayacağız.
HTML:
<div class="demo-container">
<div class="flex-item" id="item1">Item 1</div>
<div class="flex-item" id="item2">Item 2</div>
<div class="flex-item" id="item3">Item 3</div>
</div>
CSS:
.demo-container {
display: flex;
width: 600px; / Sabit bir genişlik veriyoruz ki shrink/grow'u görelim /
border: 2px solid #2C3E50;
padding: 10px;
background-color: #ECF0F1;
margin-bottom: 20px;
}
.flex-item {
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
border: 1px dashed #34495E;
}
#item1 { background-color: #E74C3C; }
#item2 { background-color: #3498DB; }
#item3 { background-color: #2ECC71; }flex-basis, bir item'ın başlangıçtaki ana boyutunu (main size) belirler. width gibi düşünebilirsiniz ama daha akıllı! Eğer container'da yer kalmazsa veya artarsa, grow ve shrink devreye girer. Şimdi ikinci item'ımıza bir başlangıç boyutu verelim.
CSS:
#item2 {
flex-basis: 200px;
}Bu kodu yazdığınızda, Item 2'nin diğerlerinden daha geniş olduğunu göreceksiniz. İşte bu onun temel, ideal boyutu. Ama container küçülürse veya büyürse bu değer tek başına yeterli olmayacak.
Flex-Grow: Büyüme FaktörüContainer'da boş alan (positive free space) kaldığında, bu alanı item'lar arasında nasıl paylaştıracağımızı flex-grow belirler. Varsayılan değeri 0'dır, yani "hiç büyüme!". Tüm item'ların grow değerini 1 yaparsak, boş alan eşit olarak bölüşülür. Farklı değerler verirsek, orantılı olarak dağıtılır.
Hadi Item 1'in açgözlü olmasını sağlayalım!
CSS:
#item1 { flex-grow: 3; }
#item2 { flex-grow: 1; }
#item3 { flex-grow: 1; }Bu durumda, mevcut boş alan 5 parçaya bölünür (3+1+1). Item 1 bu pastanın 3/5'ini, diğerleri iser 1/5'ini alır. Container'ı büyütüp küçülterek bu etkiyi rahatça gözlemleyebilirsiniz.
Flex-Shrink: Küçülme Faktörüflex-shrink ise tam tersi durumla, yani yetersiz alan (negative free space) ile ilgilenir. Item'ların toplam temel boyutu (flex-basis) container'dan büyükse, onların ne oranda küçüleceğini bu değer belirler. Varsayılan değeri 1'dir. Hadi Item 3'ün asla küçülmemesini isteyelim!
CSS:
#item1 { flex-grow: 3; flex-shrink: 1; }
#item2 { flex-grow: 1; flex-shrink: 1; flex-basis: 200px; }
#item3 { flex-grow: 1; flex-shrink: 0; / KÜÇÜLME YOK! / }Container'ı daralttığınızda, Item 1 ve Item 2 küçülmeye başlayacak, ancak flex-shrink: 0 verdiğimiz Item 3, flex-basis değerinde (veya içeriğinin min-boyutunda) sabit kalacaktır. Bu, bir sidebar veya sabit genişlikli bir bileşen için harika bir tekniktir.
Hepsinin Bir Arada KullanımıŞimdi sihirli kısa yazıma gelelim: flex property'si. Yukarıdaki her şeyi tek satırda yazabiliriz.
CSS:
/ flex: [grow] [shrink] [basis]; /
#item1 { flex: 3 1 0px; } / Grow ağırlıklı /
#item2 { flex: 1 1 200px; } / Temel boyutu 200px olan dengeli item /
#item3 { flex: 1 0 auto; } / Küçülmeyen, boyutu içeriğine göre belirlenen item /flex: 1 yazdığınızda aslında arka planda flex: 1 1 0px tanımlanır. Bu, item'ların başlangıçta sıfır noktasından başlayıp, tüm boş alanı eşit bölüşerek büyümesi demektir. Artık bunun ne anlama geldiğini biliyorsunuz!
Umarım bu basit demo, sizin de kafanızı aydınlatır. Flexbox'ın bu güçlü ama karmaşık görünen özelliklerini anlamak için en iyi yöntem, bence, böyle küçük bir sandbox oluşturup değerleriyle oynamak.
Peki siz flex özelliklerini anlamak için nasıl bir yol izlediniz? flex-shrink: 0 ile sabitlediğiniz unutulmaz bir layout sorununuz oldu mu? Aşağıda deneyimlerinizi paylaşın, tartışalım!