CSS Academy · Ders

Flex Grow, Shrink ve Basis

flex kısa yazımını kullanarak flex öğelerinin nasıl büyüyüp küçüleceğini ve temel boyutlarını denetleyin.

4. ders / 413 adım

Flex Grow, Shrink ve Basis, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

flex Kısa Yazımı

Flex öğelerindeki flex kısa yazımı üç değer belirler: flex-grow, flex-shrink, flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis, bir flex öğesinin büyümeden veya küçülmeden önceki başlangıç boyutunu belirler. (row yönünde) width değerini geçersiz kılar. auto, öğenin genişliğini veya içerik boyutunu kullanır.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow, kullanılabilir boş alan olduğunda bir öğenin kardeşlerine göre ne kadar büyüyeceğini belirler. 0 değeri büyüme olmayacağı anlamına gelir. Daha yüksek değerler orantılı olarak daha fazla alan alır.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

flex-grow Örneği

Bir kapsayıcıda 300px boş alan ve flex-grow değerleri 1 ve 2 olan iki öğe varsa ilk öğe 100px, ikinci öğe 200px ek alan alır (1:2 oranı).

flex-shrink

flex-shrink, yeterli alan olmadığında bir öğenin ne kadar küçüleceğini denetler. Varsayılan değer 1'dir (tüm öğeler eşit şekilde küçülür). 0 değeri küçülmeyi önler.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Yaygın flex Kısa Yazımı Değerleri

Bu yaygın kalıpları ezberleyin:

flex: 1 = eşit şekilde büyür ve küçülür, temel boyut 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (sabit)
flex: 0 0 200px = sabit 200px, büyüme/küçülme yok

flex: 1 — Eşit Dağılım

Tüm alt öğelerde flex: 1 ayarlamak, kullanılabilir alanı eşit olarak böler. Temel boyut 0% olur; bu nedenle öğeler sıfırdan büyür ve alanı orantılı olarak paylaşır.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis ve width Karşılaştırması

flex-basis, ana eksen yönünde width değerine göre önceliklidir. İkisini de ayarlarsanız flex-basis kazanır (flex-basis auto ise width değerine başvurur).

İçsel ve Dışsal Boyutlandırma

flex-basis: 0 olduğunda (flex: 1'de olduğu gibi) öğe 0'dan başlar ve orantılı olarak büyür; bu gerçek orantılı dağılımdır. flex-basis: auto olduğunda öğeler doğal içerik boyutlarından başlar ve ardından büyür.

Kutsal Üçlü Deseni

Klasik sabit kenar çubuğu + esnek ana bölüm + sabit kenar çubuğu düzeni:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

Flex ile min-width ve max-width

Büyüme sınırlarını denetlemek için min-width ve max-width değerlerini flex-grow ile birlikte kullanın:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Hızlı Kontrol

Bir öğede flex: 0 0 200px ayarlanmış. Bu ne anlama gelir?

İnteraktif derste cevapla

Özet

flex-grow, ek alanı orantılı olarak dağıtır. flex-shrink, öğelerin nasıl sıkışacağını denetler. flex-basis, başlangıç boyutunu belirler. flex kısa yazımındaki flex: 1, alanın eşit olarak dağıtılmasını sağlar. Aynı kapsayıcıdaki sabit boyutlu öğeler için flex: 0 0 Xpx, esnek öğeler için flex: 1 kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Flex Grow, Shrink ve Basis” dersi ücretsiz mi?

Evet — “Flex Grow, Shrink ve Basis” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Flex Grow, Shrink ve Basis” dersinde ne öğreneceğim?

flex kısa yazımını kullanarak flex öğelerinin nasıl büyüyüp küçüleceğini ve temel boyutlarını denetleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Flex Grow, Shrink ve Basis” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön