Flexbox ve Grid'i Birlikte Kullanma
Makro sayfa yerleşimi için Grid'i, bileşen düzeyinde hizalama için Flexbox'ı kullanın ve her aracın ne zaman doğru seçim olduğunu öğrenin.
Flexbox ve Grid'i Birlikte Kullanma, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Birbirini Tamamlayan Araçlardır
Esnek düzen ve ızgara rakip değildir; birlikte çalışmak üzere tasarlanmıştır. Yaygın kalıp şudur: genel sayfa yapısı için CSS Izgarası'nı, ardından her ızgara alanının içeriğini düzenlemek için esnek düzeni kullanın.
Izgarayla Sayfa Düzeni, Esnek Düzenle Bileşenler
Üst düzey sayfa iskeletini ızgarayla tanımlayın. Her ızgara alanının içinde bileşen düzeyindeki düzenleme için esnek düzeni kullanın: gezinme bağlantılarını satırda, kart içeriğini sütunda yerleştirin.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Kart Izgarası Kalıbı
Klasik kalıp şudur: kart düzeni için ızgara, her kartın iç düzeni için esnek düzen. Böylece kartlar ızgarada hizalanırken iç bölümleri (görsel, başlık, gövde, alt bilgi) doğru şekilde üst üste dizilir.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Gezinme Çubuğu Kalıbı
Yaygın bir gezinme çubuğu her ikisini de birleştirir. Gezinme çubuğunun kendisi, logo ve bağlantılar için bir esnek düzen kapsayıcısıdır. Bağlantılar bölümü başka bir esnek düzen kapsayıcısı olabilir. Çok sütunlu bir mega menüde ızgara kullanılabilir.
Kutsal Kâse Düzeni
'Kutsal Kâse' düzeni (üst bilgi, üç sütunlu orta bölüm, alt bilgi) bugün ızgarayla kolayca oluşturulur. Üç sütun — sol kenar çubuğu, ana içerik, sağ kenar çubuğu — ızgara sütunlarıdır; her birinin içindeki içerik esnek düzeni kullanır.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Her Şeyi Ortalamak — Izgara veya Esnek Düzen
Hem ızgara hem de esnek düzen içeriği kusursuz biçimde ortalayabilir. Izgara: place-items: center (align-items + justify-items için kısaltma). Esnek düzen: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Duyarlı Kenar Çubuğu Düzeni
Mobilde: tek sütun (gezinme üstte). Tablet ve daha geniş ekranlarda: kenar çubuğu ile içerik yan yana. Izgara bunu bildirime dayalı hale getirir — bir medya sorgusunda şablon alanlarını değiştirin.
Simge + Metin Kalıbı
Çok yaygın bir küçük düzen: metnin yanında bir simge. Tek satırlı ve hizalamaya ihtiyaç duyan bu yapı için esnek düzen mükemmeldir.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Hangisini Seçmeli
Izgara şu durumlarda kullanılır: satırları VE sütunları birlikte düşündüğünüzde, öğelerin izler boyunca hizalanması gerektiğinde, sayfa iskeleti oluşturduğunuzda. Esnek düzen şu durumlarda kullanılır: tek yönde düşündüğünüzde, öğelerin küçülüp büyümesi gerektiğinde, bir düğme satırı veya öğe yığını düzenlediğinizde.
Gereğinden Fazla Karmaşıklaştırmayın
Bazen max-width ve margin: auto kullanan basit bir blok öğesi, karmaşık bir ızgaradan daha iyi olabilir. Her düzenin ızgaraya ihtiyacı yoktur. İşi yapan en basit aracı kullanın.
Düzen Sorunlarında Hata Ayıklama
DevTools'ta ızgara çizgilerini veya esnek öğe ana hatlarını kaplamak için Elements panelindeki ızgara/esnek düzen rozetlerine tıklayın. Bu, görünmez düzen yapısını görünür hale getirir ve hizalama sorunlarını tanılamak için çok değerlidir.
Hızlı Kontrol
Sırasıyla sayfa düzeyi ve bileşen düzeyi düzenlerde en yaygın kullanılan düzen araçları birleşimi hangisidir?
Özet: Izgara ve Esnek Düzeni Birleştirme
Izgara ve esnek düzen birbirini tamamlar. İki boyutlu sayfa yapısı için ızgarayı kullanın. Tek boyutlu bileşen içeriği için esnek düzeni kullanın. Izgarada place-items: center her şeyi ortalar. Kart gövdesinde flex-direction: column + flex: 1, kart alt bilgilerini aşağı iter. DevTools kaplama rozetleriyle hata ayıklayın.
Sıkça Sorulan Sorular
“Flexbox ve Grid'i Birlikte Kullanma” dersi ücretsiz mi?
Evet — “Flexbox ve Grid'i Birlikte Kullanma” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Flexbox ve Grid'i Birlikte Kullanma” dersinde ne öğreneceğim?
Makro sayfa yerleşimi için Grid'i, bileşen düzeyinde hizalama için Flexbox'ı kullanın ve her aracın ne zaman doğru seçim olduğunu öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“Flexbox ve Grid'i Birlikte Kullanma” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama
- CSS Grid: template-areas auto-fit minmax
- Flexbox ve Grid'i Birlikte Kullanma
- Tema Oluşturmak için CSS Değişkenleri