Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama
justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis ve order özelliğinde ustalaşın.
Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. 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.
İnceleme: Esnek Kapsayıcı ve Öğeleri
Özet: Kapsayıcıda display: flex kullanılması, doğrudan alt öğelerden esnek öğeler oluşturur. Ana eksen, flex-direction boyunca uzanır. Çapraz eksen ise buna diktir.
justify-content Değerleri Ayrıntılı Olarak
Satır yönlü bir kapsayıcıdaki tüm justify-content değerleri: flex-start (varsayılan), flex-end, center, space-between (yalnızca aralarda boşluk), space-around (her öğenin çevresinde eşit kenar boşluğu), space-evenly (her yerde eşit boşluk).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }Öğeleri Hizalama ve İçeriği Hizalama
align-items, öğeleri tek bir satır içinde hizalar. align-content, birden fazla satırı hizalar (yalnızca flex-wrap değeri wrap olduğunda ve birden fazla satır bulunduğunda çalışır).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}Tek Tek Öğelerde align-self
align-self, belirli bir esnek öğe için align-items değerini geçersiz kılar. Diğerleri ortalanırken bir öğenin gerilmesini sağlamak için kullanışlıdır.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap ve wrap-reverse
flex-wrap: wrap, öğelerin yeni satırlara akmasını sağlar. wrap-reverse ise sarma işlemini ters yönde yapar. Basit duyarlı ızgaralar için bunu gap ile birleştirin.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}Esnek Büyüme, Küçülme ve Başlangıç Boyutu
Öğelerde kullanılan üç parçalı esnek kısaltması. flex-grow: kullanılabilir alanın paylaşım oranı. flex-shrink: alan daraldığında küçülme hızı. flex-basis: büyüme veya küçülme öncesindeki başlangıç boyutu.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Yaygın Esnek Düzen Kısaltmaları
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (flex: 1 değerinin iki katı kadar alan kaplar).
Sıralama Özelliği
order, HTML'yi değiştirmeden esnek öğelerin görsel sırasını değiştirir. Varsayılan değer 0'dır. Negatif değerler 0'ın önünde görünür. Dikkatli kullanın — görsel sıra ile DOM sırası arasındaki uyumsuzluklar klavye ve ekran okuyucu kullananların kafasını karıştırır.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */Taşma Sorununu Gidermek için min-width: 0
Esnek öğelerin örtük min-width: auto değeri vardır; bu, içerik boyutlarından daha fazla küçülmeyecekleri anlamına gelir. Daha küçük boyutlara küçülmelerine izin vermek için min-width: 0 ayarlayın — bu, esnek öğelerin içindeki metni kısaltmak için zorunludur.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}gap Olmadan Esnek Düzen Aralıkları
gap desteği olmayan eski ortamlarda, oluklar oluşturmak için öğelerde kenar boşluğu ve kapsayıcıda negatif kenar boşluğu kullanın. Ancak bugün gap tüm modern tarayıcılarda desteklenir — onu tercih edin.
İç İçe Esnek Düzen Kapsayıcıları
Her esnek öğe kendisi de bir esnek düzen kapsayıcısı olabilir. Karmaşık düzenler için Flexbox'ı iç içe kullanın: her kartın iç düzeninin de esnek biçimde düzenlendiği bir kart satırı oluşturabilirsiniz. Modern düzenlerde normal kalıp budur.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Hızlı Kontrol
flex-wrap değeri wrap olduğunda, esnek öğeler arasındaki boşluğu çapraz eksen boyunca hangi özellik dağıtır?
Özet: Flexbox'a Derinlemesine Bakış
Ana eksen dağılımı için justify-content kullanılır. Tek satırlı çapraz eksen için align-items kullanılır. Çok satırlı çapraz eksen için align-content kullanılır. Öğe başına ayarlama için align-self kullanılır. flex-wrap: wrap çok satırlı düzeni etkinleştirir. Esnek kısaltması büyümeyi, küçülmeyi ve başlangıç boyutunu denetler. order görsel sırayı değiştirir. min-width: 0 küçülme hatalarını önler.
Sıkça Sorulan Sorular
“Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama” dersi ücretsiz mi?
Evet — “Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama” 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'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama” dersinde ne öğreneceğim?
justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis ve order özelliğinde ustalaşın. 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 1. dersidir.
“Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama” 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