Yükleniyor...

CSS Flexbox

Sayfa bileşenleri kabuklar, çubuklar, menüler ve galeriler eskizledi. Flexbox, öğeleri tek yönde — satır veya sütun — float uğraşı daha az şekilde dizmenin modern yoludur. display: flex açın, flex items ile tanışın, sonra sonraki Flexbox derslerinde derinleşin.

Flexbox başlangıç araç seti

📊 Flexbox bir bakışta

Fikir Günlük iş
Flex kapsayıcı display: flex (veya inline-flex) olan ebeveyn
Flex öğeler Flex düzenine katılan doğrudan çocuklar
Ana eksen Öğelerin gittiği birincil yön (varsayılan satır)
Çapraz eksen Hizalama için dik yön
gap Öğeler arasında yerleşik boşluk
Sonraki dersler Kapsayıcı özellikleri, öğe özellikleri, duyarlı flex kalıpları

Flexbox bir boyutta en güçüdür. Tam iki boyutlu sayfa ızgaraları için Grid modülü bu Flexbox yolundan sonra gelir.

Flex kapsayıcıyı açın

Ebeveyne display: flex koyun. Çocuklar flex items olur ve varsayılan olarak bir satırda oturur.

Temel flex satırı

css 
.toolbar {
display: flex;
align-items: center;
}

.toolbar .btn {
padding: 0.5rem 0.75rem;
}

Margin savaşları yerine gap

gap, collapse hileleri olmadan öğeleri ayırır. Flex çocukları arasında eşit oluklar için onu tercih edin.

Flex gap

css 
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}

Ana eksende öğeleri ayırın

justify-content ana eksen boyunca boş alanı dağıtır. space-between klasik bir üstbilgi kalıbıdır: marka solda, eylemler sağda.

Space-between üstbilgi

css 
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

Çapraz eksende ortala — ve ikisinde

align-items: center öğeleri çapraz eksende hizalar. Kutunun içinde sakin, ortalanmış bir küme için justify ile eşleştirin.

Ortalanmış flex kümesi

css 
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}

Satır yer kalmayınca sarın

flex-wrap: wrap öğelerin sonraki satıra düşmesine izin verir — galeride bunu zaten şöyle bir gördünüz. Flex Responsive dersi daha ileri gider.

Flex wrap önizlemesi

css 
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

Sakin bir Flexbox alışkanlığı

Flexbox’ı tek boyutlu satır ve sütunlar için kullanın: navlar, araç çubukları, kart satırları, ortalama. Sonra kapsayıcı ayrıntıları, öğe büyüme/küçülme, sonra duyarlı flex. Flexbox’ın tek başına her Grid düzeninin yerini almasını beklemeyin.

Adlandırılmış flex rolleri

css 
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}

.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }

Kendiniz deneyin

  1. display: flex ve üç düğmeli bir .toolbar yapın.
  2. gap ve align-items: center ekleyin.
  3. justify-content: space-between ile bir üstbilgi kurun.
  4. Justify + align ile bir kutuda düğme çiftini ortalayın.
  5. flex-grow / flex-basis fikirlerini hangi sonraki dersin kapsayacağını yazın.

Yaygın hatalar

  • Düzen hedefi olmadan her sarmalayıcıya display: flex serpmek
  • Flexbox’tan tam 2D Grid davranışı beklemek
  • gap yerine rastgele margin ile boşlukla savaşmak
  • Sonraki dersleri atlayıp yalnızca bu girişi ezberlemek
  • Flex satırı daha netken sonsuza dek float satırlarında kalmak

Özet

  • Flexbox öğeleri bir ana eksen boyunca dizer
  • display: flex kapsayıcı oluşturur; çocuklar flex items’tır
  • gap, justify-content ve align-items günlük satırları açar
  • Wrap duyarlı satırlara bakış atar; daha fazlası sonra gelir
  • Kapsayıcı, öğe ve duyarlı Flexbox dersleri modeli sonraki adımda derinleştirir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 45 / 51
Css Ders