Web geliştirmeye yeni başlayanlar için Flexbox, öğelerin nasıl büyüyüp küçüleceğini belirlemek için güçlü özellikler sunar. flex-basis, flex-grow ve flex-shrink özellikleri, öğelerin ana eksen (main axis) boyunca nasıl boyutlandırılacağını yönetir. Bu yazıda, bu üç özelliğin nasıl çalıştığını ve hangi durumlarda kullanıldığını detaylıca ele alacağız.
flex-basis Nedir?
flex-basis, bir öğenin başlangıç boyutunu belirler. Yani, Flexbox konteynerine eklenmeden önce bir öğenin başlangıçta sahip olacağı genişlik veya yüksekliktir.
Eğer flex-direction: row ise, flex-basis genişliği kontrol eder.
Eğer flex-direction: column ise, flex-basis yüksekliği kontrol eder.
Örnek kullanım:
.container div {
flex-basis: 300px;
}
Bu durumda, tüm öğeler başlangıçta 300 piksel genişliğinde olur.
flex-grow Nedir?
flex-grow, bir öğenin fazladan alanı nasıl paylaşacağını belirler. Eğer konteynerde ekstra boşluk varsa, flex-grow özelliği olan öğeler bu boşluğu paylaşır.
Örnek kullanım:
.container div {
flex-grow: 1;
}
Bu durumda, tüm öğeler boş alanı eşit şekilde paylaşacaktır. Eğer bir öğeye flex-grow: 2; verilirse, o öğe diğerlerinden iki kat fazla yer kaplayacaktır.
Örnek:
.container div:nth-of-type(1) {
flex-grow: 1;
}
.container div:nth-of-type(2) {
flex-grow: 2;
}
Bu durumda, ikinci öğe birinci öğeden iki kat daha geniş olacaktır.
flex-shrink Nedir?
flex-shrink, bir öğenin dar alanlarda ne kadar küçüleceğini belirler. Eğer konteynerin içine sığmazlarsa, flex-shrink değeri daha büyük olan öğeler daha fazla küçülecektir.
Örnek kullanım:
.container div {
flex-shrink: 1;
}
Bu durumda, tüm öğeler eşit şekilde küçülür. Eğer bir öğeye flex-shrink: 2; verilirse, o öğe diğerlerinden iki kat fazla küçülecektir.
Örnek:
.container div:nth-of-type(1) {
flex-shrink: 2;
}
.container div:nth-of-type(2) {
flex-shrink: 0;
}
Bu durumda, birinci öğe diğerlerinden daha fazla küçülecek, ikinci öğe ise hiç küçülmeyecektir.
Örnek Uygulama
Aşağıdaki HTML yapısında beş adet div bulunuyor ve biz bunları flex-basis, flex-grow ve flex-shrink ile farklı şekillerde boyutlandıracağız:
<div class="container">
<div class="box" style="background-color: green;">A</div>
<div class="box" style="background-color: blue;">B</div>
<div class="box" style="background-color: red;">C</div>
<div class="box" style="background-color: yellow;">D</div>
<div class="box" style="background-color: purple;">E</div>
</div>
Şimdi bu öğeleri flexbox ile farklı şekillerde boyutlandıralım:
.container {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 300px;
margin: auto;
border: 2px solid black;
}
.box {
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 1;
text-align: center;
font-size: 20px;
color: white;
}
.container div:nth-of-type(3) {
flex-grow: 2;
flex-shrink: 0;
}
Bu kodları çalıştırdığımızda:
- flex-basis: 200px; ile tüm öğeler başlangıçta 200 piksel genişlikte olur.
- flex-grow: 1; ile tüm öğeler boş alanı eşit şekilde paylaşır.
- flex-shrink: 1; ile tüm öğeler aynı oranda küçülür.
- Üçüncü öğeye flex-grow: 2; verilerek, boş alanın iki katını alması sağlanmıştır.
flex-basis, flex-grow ve flex-shrink Arasındaki Farklar
| Özellik | Açıklama |
|---|
| flex-basis | Öğenin başlangıç boyutunu belirler. |
| flex-grow | Öğenin ekstra boş alanı nasıl paylaşacağını belirler. |
| flex-shrink | Öğenin küçülme oranını belirler. |
Sonuç
flex-basis, flex-grow ve flex-shrink özellikleri, öğelerin ana eksende nasıl boyutlandırılacağını belirleyen temel Flexbox özellikleridir. flex-basis öğelerin başlangıç boyutunu belirlerken, flex-grow fazladan alanı nasıl paylaşacaklarını, flex-shrink ise dar alanlarda nasıl küçüleceklerini yönetir.
Öğelerin nasıl boyutlandırılacağını belirlemek için:
- flex-basis ile başlangıç boyutunu ayarlayın.
- flex-grow ile fazladan boşlukların nasıl paylaşılacağını belirleyin.
- flex-shrink ile öğelerin nasıl küçüleceğini kontrol edin.
Flexbox ile ilgili kafanıza takılan bir şey varsa, yorumlarda paylaşabilirsiniz!