CSS Flexbox: flex-basis, flex-grow ve flex-shrink Nedir?

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

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!