Yerleşim için Flexbox
Öğeleri satır veya sütunda hizalamak, alanı dağıtmak ve float hileleri kullanmadan içeriği kaydırmak için Flexbox kullanın.
Yerleşim için Flexbox, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. 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.
Flexbox Nedir
Flexbox (Esnek Kutu Düzeni), tek boyutlu düzenler için tasarlanmış bir CSS düzen modelidir; alanı tek bir satır veya sütun boyunca dağıtmanızı sağlar. Float tabanlı düzenlerin zarif biçimde çözemediği sorunları çözer.
Flexbox'ı Etkinleştirme
container üzerine display: flex uygulayın. Doğrudan alt öğeleri otomatik olarak esnek öğelere dönüşür. Bu öğelerin alt öğeleri bundan etkilenmez.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
Ana ekseni belirler. row (varsayılan): öğeler soldan sağa sıralanır. row-reverse: sağdan sola. column: yukarıdan aşağıya. column-reverse: aşağıdan yukarıya.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — Ana Eksen Hizalaması
Alanı ana eksen boyunca dağıtır. flex-start (varsayılan), flex-end, center, space-between, space-around, space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — Çapraz Eksen Hizalaması
Öğeleri çapraz eksen boyunca (ana eksene dik olarak) hizalar. stretch (varsayılan), center, flex-start, flex-end, baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}gap Özelliği
gap: row-gap column-gap, margin kullanmadan esnek öğeler arasına boşluk ekler. Margin hilesinden çok daha temizdir. Modern tarayıcılarda geniş ölçüde desteklenir.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
Varsayılan olarak esnek öğeler tek satıra sığdırılmak için daralır. flex-wrap: wrap, sığmadıklarında yeni satırlara geçmelerini sağlar. Basit bir duyarlı ızgara için gap ile birlikte kullanın.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}Öğelerde flex Kısa Yazımı
Esnek öğelerde flex: grow shrink basis kullanılır. flex: 1, 1 1 0% için kısa yazımdır — öğeler eşit ölçüde büyür ve içerik boyutlarını yok sayar. flex: 0 0 200px, sabit 200px boyutunda bir öğe oluşturur.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
Bir esnek öğedeki align-self, yalnızca o öğe için container'ın align-items değerini geçersiz kılar. Bir öğeyi kardeşlerinden farklı hizalamak için kullanışlıdır.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }order Özelliği
order, HTML sırasını değiştirmeden esnek öğelerin görsel sırasını denetler. Varsayılan değer 0'dır. Daha düşük değerler önce görünür. Dikkatli kullanın — görsel sıra ile DOM/okuma sırası arasında uyumsuzluk oluşturur.
Flexbox ile Ortalamak
Bir elementi hem yatay hem de dikey olarak ortalamanın en basit yolu, üst elementi display: flex; justify-content: center; align-items: center olarak ayarlamaktır.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}Kısa Kontrol
ana eksen boyunca öğeler arasındaki alanı hangi Flexbox özelliği dağıtır?
Özet: Flexbox Temelleri
container üzerinde display: flex. Eksen için flex-direction: row veya column. Ana eksen aralığı için justify-content. Çapraz eksen için align-items. Oluklar için gap. Birden çok satır için flex-wrap. Büyüme için öğelerde flex kısa yazımı. Çok yönlü bir tek boyutlu düzen sistemidir.
Sıkça Sorulan Sorular
“Yerleşim için Flexbox” dersi ücretsiz mi?
Evet — “Yerleşim için Flexbox” 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.
“Yerleşim için Flexbox” dersinde ne öğreneceğim?
Öğeleri satır veya sütunda hizalamak, alanı dağıtmak ve float hileleri kullanmadan içeriği kaydırmak için Flexbox kullanı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 2. dersidir.
“Yerleşim için Flexbox” 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
- Viewport Meta Etiketi
- Yerleşim için Flexbox
- Yerleşim için CSS Grid
- Medya Sorguları ve Mobil Öncelikli Geliştirme