Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi
Flexbox kullanarak pratik gezinme çubukları, kart ızgaraları ve medya nesneleri oluşturun.
Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi, 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.
Flexbox Desenleri Neden Önemlidir
Bazı düzen desenleri neredeyse her web projesinde görülür. Flexbox, her birini en az CSS koduyla verimli biçimde çözer. Bu desenleri bilmek daha hızlı geliştirme ve daha az kod anlamına gelir.
Gezinme Çubuğu Deseni
Solda logo, sağda bağlantılar bulunan yatay bir gezinme çubuğu:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Ortalanmış Öne Çıkan Bölüm
Flexbox ile tam yükseklikte ortalanmış içerik:
<div class="hero">
<h1>Welcome</h1>
</div>
Kart Izgarası
Sarmalama ve tutarlı aralıklar içeren duyarlı kart ızgarası:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Medya Nesnesi
Medya nesnesi — esnek metnin yanında bulunan sabit genişlikte bir görsel — yorumlarda, sosyal medya gönderilerinde ve liste öğelerinde kullanılan temel bir kullanıcı arayüzü desenidir:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Flex ile Yapışkan Alt Bilgi
Sabit yükseklikler ayarlamadan alt bilgiyi en alta itme:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Simge + Metin Düğmesi
Düğme içinde dikey olarak ortalanmış simge + metin:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Flexbox ile Kutsal Kâse Düzeni
Üç sütunlu kutsal kâse düzeni (üst bilgi, alt bilgi, kenar çubuğu-ana içerik-kenar çubuğu):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Etiketli Form Satırı
Bir form satırındaki hizalanmış etiket-girdi çiftleri:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Küçük Görsel Galerisi
Sarmalama kullanan bir görsel galerisi:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Rozet/Etiket Listesi
Metin gibi akıp satıra sığmadığında sarmalanan satır içi rozetler/etiketler:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Hızlı Kontrol
Medya nesnesi deseninde, metin gövdesi uzun ve bölünemeyen bir dize içerdiğinde taşmasını ne önler?
Özet
Yaygın Flexbox desenleri: gezinme çubuğu (logo + otomatik kenar boşluğu + bağlantılar), öne çıkan bölüm (sütun + ortalı hizalama), medya nesnesi (sabit görsel + min-width:0 içeren flex:1 gövde), yapışkan alt bilgi (sütun gövde + flex:1 ana içerik), kart ızgarası (sarmalama + flex:1 1 Xpx). Bu beş desen, gerçek dünyadaki düzen gereksinimlerinin çoğunu karşılar.
Sıkça Sorulan Sorular
“Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi” dersi ücretsiz mi?
Evet — “Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi” 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.
“Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi” dersinde ne öğreneceğim?
Flexbox kullanarak pratik gezinme çubukları, kart ızgaraları ve medya nesneleri oluşturun. 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.
“Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi” 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