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

eminbasbayan

3 dk okuma

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

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

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.

TEXT?

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.

TEXT?

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.

TEXT?

Ö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: