flex-grow, flex-shrink ve flex-basis nasıl çalışır?

Question

IT Interview Practice · Accepted Answer

Bu üç özellik **flex öğeleri** üzerinde, ana eksen boyunca alanı nasıl paylaştıklarını kontrol eder. `flex` kısa yazım bu özellikleri birleştirir.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## Her özellik açıklandı

- **`flex-basis`** — öğenin ideal/ilk ana eksen boyutu (satır için `width` gibi). `auto` içeriğin boyutunu kullanır.
- **`flex-grow`** — *ekstra* alan varsa, bu öğe ne kadar hırslı bir şekilde genişler. `0` = genişleme; daha yüksek sayılar orantılı olarak büyür.
- **`flex-shrink`** — *yeterli* alan yoksa, bu öğe ne kadar isteyerek küçülür. `0` = asla küçülme (taşmaya neden olabilir); varsayılan `1` = gerektiğinde küçülür.

## Orantılı olarak büyüme

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

Ekstra alan, mutlak boyutlar değil, büyüme değerlerinin oranında bölünür.

## Yaygın kısa yazım değerleri

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` her öğede eşit sütunlar oluşturur; `flex: 0 0 250px` esnek birinin yanında sabit genişliğe sahip katı bir panel oluşturur.

## Gerçek bir düzen: sabit kenar çubuğu + akışkan içerik

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## Neden önemli

Bu özellikler, flex düzenlerde orantılı boyutlandırmayı kontrol etmenin yoludur — eşit sütunlar (`flex: 1`), sabit-artı-esnek paneller (`flex: 0 0 X` + `flex: 1`) ve istenmeyen küçülmeyi engelleme (`flex-shrink: 0`).

basis/grow/shrink'i anlamak, Flexbox'u "öğeler orada duruyor" halinden kesin, yanıt veren kontrole dönüştürür.

Her özellik açıklandı

Orantılı olarak büyüme

Yaygın kısa yazım değerleri

Gerçek bir düzen: sabit kenar çubuğu + akışkan içerik

Neden önemli

İlgili sorular