Flex Kısa Gösterim Kalıpları
Flex kısa gösteriminde uzmanlaşın; flex: 1, flex: none ve flex: auto gibi yaygın değerleri anlayın.
Flex Kısa Gösterim Kalıpları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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ına Yeniden Bakış
flex kısa yazımı, flex-grow, flex-shrink ve flex-basis özelliklerini tek bir bildirimde ayarlar. Kısa yazımın çeşitlerini anlamak, gerçek dünya düzenleri için çok önemlidir.
flex: 1
flex: 1, flex: 1 1 0% ile eşdeğerdir. Öğeler sıfır temel boyuttan başlar ve kullanılabilir alanı doldurmak için eşit biçimde büyür. Bu, eşit sütunlar oluşturmak için en yaygın kısa yazımdır.
<div class="equal-cols">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
flex: auto
flex: auto = flex: 1 1 auto. Öğeler doğal içerik boyutlarından başlar, ardından orantılı olarak büyür veya küçülür. Büyüme sırasında daha geniş içeriğe daha fazla alan verilir.
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Contact</a>
</div>
flex: none
flex: none = flex: 0 0 auto. Öğe sabittir; büyümez veya küçülmez. Boyutu, doğal içerik genişliği ya da açıkça belirtilen genişlik/yükseklik tarafından belirlenir.
<div class="row">
<div class="logo">Logo</div>
<div>Flexible content</div>
</div>
flex: 0 0 Xpx
Sabit boyutlu ve esnek olmayan bir öğedir. Tam genişlikte kenar çubuğu panelleri oluşturmanın en açık yolu budur:
<div class="layout">
<div class="sidebar-left">Left</div>
<div class="main-content">Main</div>
<div class="sidebar-right">Right</div>
</div>
flex: 1 ile flex: 1 1 auto Karşılaştırması
Temel fark şudur: flex: 1 (temel boyut %0) kullanıldığında tüm öğeler 0'dan başlar ve orantılı olarak büyür. flex: 1 1 auto kullanıldığında ise öğeler doğal içerik boyutlarından başlar ve ardından büyür. Bu, kalan alanın nasıl dağıtılacağını etkiler.
flex: 2 Oranı
Orantılı dağılımlar için eşit olmayan flex-grow değerleri kullanın:
<div class="split">
<div class="main">Main (2/3)</div>
<div class="side">Side (1/3)</div>
</div>
Sabit ve Esnek Öğeleri Birleştirme
Gerçek dünyada en yaygın desen şudur: sabit kenar çubuğu + esnek ana içerik:
<div class="layout">
<div class="sidebar">Sidebar 280px</div>
<div class="content">Flexible content</div>
</div>
min-width: 0 Flexbox Hilesi
Flex öğelerinin varsayılan min-width: auto değeridir. Bu, öğelerin içerik boyutlarının altına küçülmesini engelleyebilir. Serbestçe küçülmesi gereken öğelerde (kesilerek kısaltılan metin kapsayıcıları gibi) min-width: 0 ayarlayın.
<div class="row">
<div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>
Kart Izgarası Deseni
Esnek ancak sınırlandırılmış kartlardan oluşan duyarlı kart ızgarası:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
flex Kısa Yazımında Hata Ayıklama
Hesaplanan flex-grow, flex-shrink ve flex-basis değerlerini incelemek için tarayıcı DevTools'u kullanın. Flexbox denetleyicisinin katman görünümü, boş alanı ve öğe boyutlarını görsel olarak da gösterir.
Hızlı Kontrol
flex: auto hangi kısa yazıma açılır?
Özet
Temel flex kısa yazımlarını ezberleyin: flex: 1 (sıfırdan başlayan eşit sütunlar), flex: auto (doğal boyuttan büyüme), flex: none (sabit), flex: 0 0 Xpx (sabit boyut). Kesilerek kısaltılan metin içeren flex alt öğelerinde min-width: 0 kullanın. Klasik kenar çubuğu düzenleri için sabit ve esnek öğeleri birleştirin.
Sıkça Sorulan Sorular
“Flex Kısa Gösterim Kalıpları” dersi ücretsiz mi?
Evet — “Flex Kısa Gösterim Kalıpları” 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 Kısa Gösterim Kalıpları” dersinde ne öğreneceğim?
Flex kısa gösteriminde uzmanlaşın; flex: 1, flex: none ve flex: auto gibi yaygın değerleri anlayın. 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 3. dersidir.
“Flex Kısa Gösterim Kalıpları” 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
- align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma
- order Özelliği ve Görsel Yeniden Sıralama
- Flex Kısa Gösterim Kalıpları
- Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi