Bu kılavuzda, flex öğelerine uygulanan ve ana eksen boyunca öğelerin boyutunu ve esnekliğini kontrol etmemizi sağlayan üç özelliği inceleyeceğiz: flex-grow, flex-shrink ve flex-basis. Bu özelliklerin büyüyen ve küçülen öğelerle nasıl çalıştığını tam olarak anlamak, flexbox’ta ustalaşmanın anahtarı olacak.
İlk bakış
Üç özelliğimiz bir flex öğesinin esnekliğinin aşağıdaki yönlerini kontrol eder:
flex-grow: Öğe pozitif boş alanın ne kadarını alıyor?flex-shrink: Bu öğeden ne kadar negatif boş alan kaldırılabilir?flex-basis: Büyüme ve küçülme gerçekleşmeden önce öğenin boyutu nedir?
Bu özellikler genellikle flex kısaltmasıyla ifade edilir. Aşağıdaki kod flex-grow özelliğini 2, flex-shrink özelliğini 1 ve flex-basis özelliğini auto olarak ayarlar.
.item {
flex: 2 1 auto;
}
Flexbox’ın Temel Kavramları makalesini okuduysanız, bu özellikleri zaten tanımış olmalısınız. Burada, bunları kullandığınızda tarayıcının ne yaptığını tam olarak anlayabilmeniz için bunları derinlemesine inceleyeceğiz.
Ana eksen üzerinde çalışırken önemli kavramlar
Flex özelliklerinin ana eksen boyunca oranları kontrol etmek için nasıl çalıştığına bakmadan önce araştırmaya değer birkaç kavram bulunur. Bunlar, herhangi bir büyüme veya küçülme gerçekleşmeden önce esnek öğelerin doğal boyutu ve boş alan kavramıyla ilgilidir.
Flex öğe boyutlandırma
Flex öğelerini yerleştirmek için ne kadar alan olduğunu hesaplamak için tarayıcının başlangıçta öğenin ne kadar büyük olduğunu bilmesi gerekir. Mutlak uzunluk birimi kullanılarak uygulanan bir genişlik veya yüksekliğe sahip olmayan öğeler için bu nasıl hesaplanır?
CSS’de min-content ve max-content kavramları bulunur – bu anahtar kelimeler CSS İçsel ve Dışsal Boyutlandırma Spesifikasyonunda tanımlanmıştır ve uzunluk birimi yerine kullanılabilir.
Örneğin aşağıdaki örnekte bir metin dizesi içeren iki paragraf öğemiz bulunuyor. İlk paragraf min-content genişliğine sahiptir. Bu anahtar sözcüğü destekleyen bir tarayıcıda, metnin kendisine sunulan tüm soft sarma fırsatlarını kullandığını ve taşmadan olabildiğince küçük hale geldiğini görebilmeniz gerekir. O halde bu, söz konusu dizenin minimum içerik boyutudur. Esasen, dizedeki en uzun sözcük bu boyutu belirler.
İkinci paragraf max-content değerine sahiptir ve bu yüzden tam tersini yapar. Olabildiğince büyük olur ve hiçbir yumuşak sarma fırsatı kullanmaz. Eğer kap çok dar olsaydı, içinde bulunduğu kutuyu taşırırdı.
.min-content {
width: -moz-min-content;
width: min-content;
border: 2px dotted rgb(96, 139, 168);
}
.max-content {
width: -moz-max-content;
width: max-content;
border: 2px dotted rgb(96, 139, 168);
} <p class="min-content">I am sized with min-content and so I will take all of the soft-wrapping opportunities.</p>
<p class="max-content">I am sized with max-content and so I will take none of the soft-wrapping opportunities.</p>Tarayıcınız henüz bu anahtar kelimeleri desteklemiyorsa, her iki paragraf da blok akışında normal paragraflar olarak işlenecektir; aşağıdaki ekran görüntüleri beklenen işlemeyi göstermektedir.
Bu davranışı ve bu makalenin ilerleyen bölümlerinde flex-grow ve flex-shrink’i incelerken min-content ve max-content’in ne gibi etkileri olduğunu unutmayın.
Pozitif ve negatif boş alan
Bu özellikler hakkında konuşmak için pozitif ve negatif boş alan kavramını anlamamız gerekir. Bir flex konteyneri pozitif boş alana sahip olduğunda, konteyner içindeki flex öğelerini görüntülemek için gerekenden daha fazla alana sahip olur. Örneğin, 500 piksel genişliğinde bir kabım varsa, flex yönü row ise ve her biri 100 piksel genişliğinde üç flex öğem varsa, kabı doldurmalarını istersem öğeler arasında dağıtılabilecek 200 piksel pozitif boş alanım vardır.
Öğelerin doğal boyutu esnek kapsayıcıdaki kullanılabilir alandan daha büyük olduğunda negatif boş alana sahip oluruz. Yukarıdaki gibi 500 piksel genişliğinde bir kapsayıcım varsa, ancak üç esnek öğenin her biri 200 piksel genişliğindeyse, ihtiyacım olan toplam alan 600 piksel olacaktır, bu nedenle 100 piksel negatif boş alanım vardır. Kapsayıcıya sığmalarını sağlamak için bu alan öğelerden kaldırılabilir.
Esneklik özelliklerini anlamak için anlamamız gereken, pozitif boş alanın bu dağılımı ve negatif boş alanın uzaklaştırılmasıdır.
Aşağıdaki örneklerde flex-direction row olarak ayarlanmış şekilde çalışıyoruz, bu nedenle öğelerin boyutu her zaman width özelliklerinden gelecek. Tüm öğelerin toplam genişliğini konteyner genişliği ile karşılaştırarak yaratılan pozitif ve negatif boş alanı hesaplayacağız. Her örneği aynı şekilde flex-direction: column ile de deneyebiliriz. Bu durumda ana eksen sütun olacak ve pozitif ve negatif boş alanı hesaplamak için öğelerin yüksekliğini ve içinde bulundukları kabın yüksekliğini karşılaştırmamız gerekecek.
Flex-basis özelliği
flex-basis özelliği, herhangi bir alan dağıtımı gerçekleşmeden önce flex öğesinin başlangıç boyutunu belirtir. Bu özelliğin ilk değeri auto’dur. flex-basis auto olarak ayarlanırsa, tarayıcı öğenin başlangıç boyutunu hesaplamak için önce öğenin ana boyutunun mutlak bir boyuta sahip olup olmadığını kontrol eder. Öğenize 200 piksel genişlik vermiş olsaydınız durum böyle olurdu. Bu durumda 200 piksel bu öğe için flex-basis olacaktır.
Bunun yerine öğeniz otomatik olarak boyutlandırılırsa, otomatik, içeriğinin boyutuna çözümlenir. Bu noktada, flexbox öğenin maksimum içerik boyutunu flex-base olarak alacağından, min- ve maks-içerik boyutlandırma bilginiz faydalı olacaktır. Aşağıdaki örnek bunu göstermeye yardımcı olabilir.
Bu örnekte, hem flex-grow hem de flex-shrink 0 olarak ayarlanmış bir dizi esnek olmayan kutu oluşturdum. Burada, ana boyut olarak ayarlanmış 150 piksellik açık bir genişliğe sahip olan ilk öğenin 150 piksellik bir flex-base aldığını, diğer iki öğenin ise genişliğe sahip olmadığını ve bu nedenle içerik genişliklerine göre boyutlandırıldığını görebiliriz.
.box {
display: flex;
}
.box :first-child {
width: 150px;
}
.box > * {
flex: 0 0 auto;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>auto anahtar sözcüğüne ek olarak, flex-basis olarak content anahtar sözcüğünü de kullanabilirsiniz. Bu, öğede ayarlanmış bir genişlik olsa bile flex-basis’in içerik boyutundan alınmasıyla sonuçlanacaktır. Bu daha yeni bir anahtar sözcüktür ve daha az tarayıcı desteğine sahiptir, ancak flex-base olarak auto kullanarak ve öğenizin otomatik olarak boyutlandırılması için ayarlanmış bir genişliğe sahip olmadığından emin olarak her zaman aynı etkiyi elde edebilirsiniz.
flexbox’ın alan dağıtımı yaparken öğenin boyutunu tamamen göz ardı etmesini istiyorsanız, flex-basis değerini 0 olarak ayarlayın. Bu aslında flexbox’a tüm alanın kapılmaya hazır olduğunu ve orantılı olarak paylaştırılmasını söyler. flex-grow’u incelemeye devam ederken bunun örneklerini göreceğiz.
Flex-grow özelliği
flex-grow özelliği, pozitif boş alan dağıtıldığında flex öğesinin flex konteynerindeki diğer flex öğelerine göre ne kadar büyüyeceğini belirleyen flex büyüme faktörünü belirtir.
Tüm öğeleriniz aynı esnek büyüme faktörüne sahipse, alan hepsi arasında eşit olarak dağıtılacaktır. İstediğiniz durum buysa, tipik bir değer olarak 1’i kullanırsınız, ancak isterseniz hepsine 88, 100 veya 1,2’lik bir esnek büyüme de verebilirsiniz – bunun bir oran olduğunu unutmayın. Faktör herkes için aynıysa ve esnek konteynerde pozitif boş alan varsa, o zaman herkese eşit olarak dağıtılacaktır.
flex-grow ve flex-basis’in birleştirilmesi
flex-grow ve flex-basis’in nasıl etkileşime girdiği konusunda işler karışabilir. Farklı içerik uzunluklarına sahip üç flex öğesini ve bunlara uygulanan aşağıdaki flex kurallarını ele alalım:
flex: 1 1 auto;
Bu durumda flex-basis değeri auto’dur ve öğelerin genişlik ayarı yoktur, dolayısıyla otomatik olarak boyutlandırılır. Bu, flexbox’ın öğelerin maksimum içerik boyutuna baktığı anlamına gelir. Öğeleri yerleştirdikten sonra flex konteynerinde, aşağıdaki resimde taralı alan olarak gösterilen bir miktar pozitif boş alanımız olur:
İçerik boyutuna eşit bir esnek tabanla çalışıyoruz, bu nedenle dağıtılacak kullanılabilir alan toplam kullanılabilir alandan (esnek kabın genişliği) çıkarılır ve kalan alan daha sonra her öğe arasında eşit olarak paylaştırılır. Daha büyük öğemiz, diğerleriyle aynı miktarda boş alana sahip olmasına rağmen daha büyük bir boyuttan başladığı için daha büyük olur:
Aslında istediğiniz şey, farklı boyutlarda başlasalar bile eşit büyüklükte üç ürünse, bunu kullanmalısınız:
flex: 1 1 0;
Burada, alan dağıtımı hesaplamamızın amaçları doğrultusunda öğenin boyutunun 0 olduğunu söylüyoruz – tüm alan kapılabilir ve tüm öğeler aynı esnek büyüme faktörüne sahip olduğundan, her biri eşit miktarda alan dağıtılır. Sonuç olarak üç eşit genişlikte, esnek öğe elde edilir.
Farklı davranışı görmek için bu örnekte flex-grow faktörünü 1’den 0’a değiştirmeyi deneyin:
.box {
display: flex;
}
.box > * {
flex: 1 1 0;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three has more content</div>
</div>Öğelere farklı esnek büyüme faktörleri verme
Flex-basis ile flex-grow’un nasıl çalıştığını anlamamız, öğelere farklı flex-grow faktörleri atayarak bireysel öğe boyutlarımız üzerinde daha fazla kontrol sahibi olmamızı sağlar. Tüm alanın dağıtılabilmesi için flex-basis değerimizi 0’da tutarsak, üç flex öğesinin her birine farklı bir flex-grow faktörü atayabiliriz. Aşağıdaki örnekte aşağıdaki değerleri kullanıyorum:
1ilk öğe için1ikinci öğe için2üçüncü öğe için
Bu da mevcut alanın aşağıdaki gibi dağıtılacağı anlamına gelir. Flex büyüme faktörlerini toplamamız, ardından flex konteynerindeki toplam pozitif boş alan miktarını bu sayıya bölmemiz gerekir; bu durumda 4. Daha sonra alanı bireysel değerlere göre paylaştırırız – ilk öğe bir parça, ikincisi bir parça, üçüncüsü iki parça alır. Bu, üçüncü öğenin birinci ve ikinci öğelerin iki katı büyüklüğünde olduğu anlamına gelir.
.box {
display: flex;
}
.one {
flex: 1 1 0;
}
.two {
flex: 1 1 0;
}
.three {
flex: 2 1 0;
} <div class="box">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>Burada herhangi bir pozitif değer kullanabileceğinizi unutmayın. Önemli olan bir öğe ile diğerleri arasındaki orandır. Büyük sayılar veya ondalık sayılar kullanabilirsiniz – bu size kalmış. Bunu test etmek için yukarıdaki örnekte atanan değerleri .25, .25 ve .50 olarak değiştirin – aynı sonucu göreceksiniz.
flex-shrink özelliği
flex-shrink özelliği, negatif boş alan dağıtıldığında flex öğesinin flex konteynerindeki diğer flex öğelerine göre ne kadar küçüleceğini belirleyen flex küçültme faktörünü belirtir.
Bu özellik, tarayıcının flex öğelerinin flex-baz değerlerini hesapladığı ve bunların flex kabına sığmayacak kadar büyük olduğunu tespit ettiği durumlarla ilgilidir. flex-shrink pozitif bir değere sahip olduğu sürece, öğeler kabın dışına taşmamaları için küçülecektir.
Dolayısıyla, flex-grow mevcut alanın artırılmasıyla ilgilenirken, flex-shrink kutuların taşmadan konteynerlerine sığmasını sağlamak için alanın azaltılmasını yönetir.
Bir sonraki örnekte bir flex konteyner içinde üç öğe var; her birine 200 piksel genişlik verdik ve konteyner 500 piksel genişliğinde. flex-shrink 0 olarak ayarlandığında öğelerin küçülmesine izin verilmiyor ve bu nedenle kutudan taşıyorlar.
.box {
display: flex;
}
.box > * {
flex: 0 0 auto;
width: 200px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three has more content</div>
</div>flex-shrink değerini 1 olarak değiştirdiğinizde, tüm öğelerin kutuya sığması için her öğenin aynı miktarda küçüldüğünü göreceksiniz. Bunu yapabilmek için başlangıçtaki genişliklerinden daha küçük hale geldiler.
Flex-shrink ve flex-basis’in birleştirilmesi
Flex-shrink’in flex-grow ile hemen hemen aynı şekilde çalıştığını söyleyebilirsiniz. Ancak tam olarak aynı olmamasının iki nedeni vardır.
Genellikle fark edilmese de, spesifikasyonda tanımlanan flex-shrink’in negatif alan için flex-grow’un pozitif alan için olduğu gibi tam olarak aynı olmamasının bir nedeni bulunur:
“Not: Negatif alan dağıtılırken flex shrink faktörü flex base size ile çarpılır. Bu, negatif alanı öğenin ne kadar küçülebildiğiyle orantılı olarak dağıtır, böylece örneğin küçük bir öğe, daha büyük bir öğe fark edilir şekilde küçülmeden önce sıfıra küçülmez.”
İkinci neden ise flexbox’ın negatif boş alanın kaldırılması sırasında küçük öğelerin sıfır boyutuna küçülmesini engellemesidir. Öğeler minimum içerik boyutlarında, yani kendilerine sunulan soft wrap fırsatlarından yararlandıkları takdirde ulaşacakları boyutta kalacaklardır.
Bunu, min-içerik yerleşiminin, flex tabanının içeriğin boyutuna göre çözümlendiği aşağıdaki örnekte gerçekleştiğini görebilirsiniz. Esnek konteynerin genişliğini değiştirirseniz (örneğin 700 piksele çıkarırsanız) ve ardından esnek öğe genişliğini azaltırsanız, ilk iki öğenin sarılacağını, ancak asla bu minimum içerik boyutundan daha küçük olmayacaklarını görebilirsiniz. Kutu küçüldükçe alan üçüncü öğeden kaldırılır.
.box {
width: 500px;
display: flex;
}
.box > * {
flex: 1 1 auto;
} <div class="box">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three has more content and so has a larger size</div>
</div>Pratikte küçültme davranışı size makul sonuçlar verme eğilimindedir. Genellikle içeriğinizin tamamen kaybolmasını veya kutuların minimum içeriklerinden daha küçük olmasını istemezsiniz. Bu nedenle yukarıdaki kurallar, bir kaba sığması için küçültülmesi gereken içerik açısından mantıklıdır.
Öğelere farklı flex-shrink faktörleri verilmesi
flex-grow ile aynı şekilde, flex-items öğelerine farklı flex-shrink faktörleri verebilirsiniz. Bu şekilde bir öğenin kardeşlerinden daha hızlı veya daha az küçülmesini ya da hiç küçülmemesini istiyorsanız varsayılan davranışı değiştirmenize yardımcı olabilir.
Aşağıdaki örnekte ilk öğenin flex-shrink faktörü 1, ikincinin 0 (yani hiç küçülmez) ve üçüncünün 4’tür. Bu nedenle üçüncü öğe ilkinden daha hızlı küçülür. Farklı değerlerle oynayın – flex-grow için olduğu gibi burada da ondalık veya daha büyük sayılar kullanabilirsiniz. Size en mantıklı geleni seçin.
.box {
display: flex;
}
.box > * {
width: 200px;
}
.one {
flex: 1 1 auto;
}
.two {
flex: 1 0 auto;
}
.three {
flex: 2 4 auto;
} <div class="box">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>Flex öğelerin boyutlandırılmasında ustalaşma
Flex öğe boyutlandırmanın nasıl çalıştığını gerçekten anlamanın anahtarı, devreye giren çok sayıda şeyi anlamaktır. Bu kılavuzlarda daha önce ele aldığımız aşağıdaki hususları göz önünde bulundurun:
Öğenin temel boyutunu ne belirler?
- flex-basis otomatik olarak ayarlanmış mı ve öğenin ayarlanmış bir genişliği var mı? Eğer öyleyse, boyut bu genişliğe göre belirlenir.
- flex-basis auto veya content olarak ayarlanmış mı (destekleyen bir tarayıcıda)? Eğer öyleyse, boyut öğe boyutuna göre belirlenir.
- flex-basis bir uzunluk birimi mi, ancak sıfır değil mi? Eğer öyleyse bu öğenin boyutudur.
- flex-basis 0 olarak mı ayarlanmış? Eğer öyleyse, öğe boyutu alan paylaşımı hesaplamasında dikkate alınmaz.
Boş yerimiz var mı?
Pozitif boş alan olmadan öğeler büyüyemez ve negatif boş alan olmadan da küçülemezler.
- Tüm öğeleri alıp genişliklerini (veya bir sütunda çalışıyorsanız yüksekliklerini) topladığımızda, bu toplam konteynerin toplam genişliğinden (veya yüksekliğinden) az mı? Eğer öyleyse, pozitif boş alanınız var demektir ve flex-grow devreye girer.
- Tüm öğeleri alır ve genişliklerini (veya sütunda çalışıyorsanız yüksekliklerini) toplarsak, bu toplam kabın toplam genişliğinden (veya yüksekliğinden) fazla mıdır? Eğer öyleyse, negatif boş alanınız var demektir ve flex-shrink devreye girer.
Alan dağıtmanın diğer yolları
Öğelere boşluk eklenmesini istemiyorsanız, flex konteynerdeki öğeleri hizalama kılavuzunda açıklanan hizalama özelliklerini kullanarak öğeler arasındaki veya çevresindeki boş alanla başa çıkabileceğinizi unutmayın. justify-content özelliği, öğeler arasındaki veya çevresindeki boş alanın dağıtılmasını sağlayacaktır. Ayrıca flex öğelerinde otomatik kenar boşluklarını kullanarak öğeler arasında boşluk bırakabilir ve boşluklar oluşturabilirsiniz.
Elinizin altındaki tüm flex araçlarıyla, başlangıçta biraz deneme yapmanız gerekse de çoğu görevi başarabileceğinizi göreceksiniz.