1. Giriş: Flexbox'ın Üç Silahşörü
Flexbox'ta bir elemanın boyutunu width verip geçmek, modern düzende (layout) yeterli değildir. Elemanların "ekran genişlerse ne yapayım?" veya "ekran daralırsa ne yapayım?" sorularına cevap vermesi gerekir.
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
Bu davranışı yöneten formül şudur: flex: [grow] [shrink] [basis]
- flex-basis: İdeal başlangıç boyutu.
- flex-grow: Büyüme isteği (Varsa boşluğu kap).
- flex-shrink: Küçülme/Ezilme payı (Sığmazsak küçül).
2. Flex-Basis: Başlangıç Noktası (İdeal Boyut)
flex-basis, pasta kesilmeden önceki talebinizdir. Tarayıcıya "Eğer yer varsa ben şu kadar genişlikte olmak istiyorum" dersiniz.
- CSS Karşılığı: flex-basis: 20px;
- Tailwind Karşılığı: basis-64, basis-1/4 vb.
- Mantık: flex-basis verilirse width ezilir.
🧪 Canlı Örnek: Yüzdelik ve Sabit Başlangıçlar
Aşağıdaki örnekte kutulara başlangıç boyutu veriyoruz ancak büyüme veya küçülme (grow/shrink) komutu vermiyoruz.
<div class="flex gap-4 p-4 bg-gray-100">
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 basis-1/4">
%25 Genişlik
</div>
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 basis-1/4">
%25 Genişlik
</div>
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 basis-2/4">
%50 Genişlik
</div>
</div>
Gözlem: Toplam genişlik %100'ü (25+25+50) bulduğu için satır tam dolar.
3. Flex-Grow: Boşlukları Doldurma (Yayılma)
Kapsayıcıda (Container) hala boş yer varsa bunu kim alacak? flex-grow değeri 0'dan büyük olan elemanlar, kalan boşluğu paylaşır.
- CSS Karşılığı: flex-grow: 1;
- Tailwind Karşılığı: grow (grow:1), grow-0 (grow:0).
🧪 Canlı Örnek: Bencil vs. Paylaşımcı
Burada 1. ve 2. kutuya "büyü" (grow) diyoruz, 3. kutuya "sabit kal" (grow-0) diyoruz.
<div class="flex gap-4 p-4 bg-gray-100">
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 grow">
1. Esnek Kutu
</div>
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 grow">
2. Esnek Kutu
</div>
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 grow-0">
3. Sabit Kutu
</div>
</div>
Matematik: Kalan boşluk ikiye bölünür ve sadece ilk iki kutuya eklenir. 3. kutu en sağda küçük kalır.
4. Flex-Shrink: Sıkışma Anında Fedakarlık
Ekranda yer kalmadığında kimin küçüleceğine karar veririz. Bu özellik "Responsive Tasarım"ın gizli kahramanıdır.
- Varsayılan: Elemanlar sığmazsa küçülür (shrink: 1).
- Kritik Hamle: Bir elemanın boyutunu (örn: Logo, İkon) korumak istiyorsanız ona shrink-0 vermelisiniz.
🧪 Canlı Örnek: "Ezilmeyen" Yan Menüler
Bu örnekte 1. ve 3. kutuya "Asla küçülme!" (shrink-0) diyoruz. Ortadaki kutu (2. kutu) ise "alan daralırsa sen feda edil" (basis-lg ama shrink default 1) rolünü üstleniyor.
<div class="flex gap-4 p-4 bg-gray-100 border border-red-500 w-[500px]">
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 basis-64 shrink-0">
Sol Sabit
</div>
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 basis-lg">
Esnek İçerik (Ezilen)
</div>
<div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8 basis-64 shrink-0">
Sağ Sabit
</div>
</div>
Senaryo: Bu yapı tipik bir [Sidebar - İçerik - Sidebar] yapısıdır.
5. Altın Özet: flex Kısayol Kullanımları
Genellikle tek tek grow, shrink yazmak yerine flex kısayolu (shorthand) kullanılır. Tailwind'de ve CSS'de en sık kullanılan kalıplar şunlardır:
| Bootstrap Class | CSS Karşılığı (grow shrink basis) |
Anlamı ve Kullanım Alanı |
|---|---|---|
| (Varsayılan) | 0 1 auto |
Standart. Sınıf eklenmezse eleman büyümez, gerekirse küçülür. |
.flex-grow-1 |
1 1 auto * |
Genişle. Boşluğu doldurur. (Not: Tailwind'deki flex-1 gibi basis'i 0 yapmaz, auto bırakır). |
.flex-fill |
1 1 auto |
Doldur. Elemanları içeriklerine göre genişletir ve kalan boşluğu kaplar. |
.flex-grow-0.flex-shrink-0 |
0 0 auto |
Kilit. İki sınıf birlikte kullanılır. Ne büyür ne küçülür. Sabit ikonlar için idealdir. |
flex-1 vs flex-auto Farkı (Mülakat Sorusu)
- flex-1: "Hepimiz eşit kardeşiz." (İçerik "A" da olsa "Lorem Ipsum" da olsa kutular eşit genişlikte başlar).
- flex-auto: "İhtiyaca göre adalet." (Uzun yazısı olan kutu daha geniş pay alır).
6. Bonus: Flex Wrap (Satır Kaydırma)
Bazen elemanların sıkışıp küçülmesini değil, bir alt satıra geçmesini isteriz. İşte o zaman flex-wrap devreye girer.
<div class="flex gap-3 flex-wrap"> <div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8">1</div> <div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8">2</div> <div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8">3</div> <div class="bg-fuchsia-400 border-2 border-fuchsia-600 p-8">4...</div> </div>