Yükleniyor...

CSS Flex Öğeleri

Flex Container ebeveyni yönetir. Flex öğeleri başka bir soruya yanıt verir: o satır veya sütunda her çocuk nasıl büyür, küçülür ve boyutuna başlar? Duyarlı flex kalıplarının peşine düşmeden önce basis, grow ve shrink’i iyice öğrenin.

Flex öğeleri araç seti

📊 Flex öğelerine bakış

Özellik	Günlük işi
`flex-basis`	Boş alan dağıtılmadan önceki ana eksen başlangıç boyutu
`flex-grow`	Bu öğenin kalan alandan ne kadar aldığını (birimsiz çarpan)
`flex-shrink`	Alan daraldığında bu öğenin ne kadar istekle küçüldüğü
`flex`	grow, shrink ve basis için kısayol
`align-self`	Tek bir öğe için konteynerin `align-items` değerini geçersiz kılar
`order`	Görsel sırayı değiştirir (az kullanın — DOM/erişilebilirliği bozmayın)

basis’i, öğenin ana eksendeki tercih edilen başlangıç uzunluğu gibi düşünün. Sonra grow ve shrink kalan boş veya eksik alanı paylaşır.

flex-grow — kalan alanı al

1 çarpanı öğenin boş alana genişlemesine izin verir. Kardeş çarpanlar yarışır: flex-grow: 1 olan iki öğe kalanı eşit böler.

Growing main column

css

.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — bir boyuttan başla

flex-basis, grow/shrink hesabından önce ana eksen başlangıç boyutunu ayarlar. Flex algoritması için basis’i tercih edin; width/height hâlâ önemlidir ama flex’in kendi başlangıç noktası basis’tir.

Sidebar with basis

css

.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — alanı geri ver

Satır çok daraldığında shrink çarpanları kimin sıkışacağını kararlaştırır. flex-shrink: 0 ikonları veya sabit rayları ezilmekten korur.

Protect from squash

css

.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

flex kısayolu

flex: grow shrink basis üçlüyü paketler. Sakin yaygın varsayılanlar: dolduran çocuk için flex: 1 (büyüsün, küçülmeye izin ver, basis auto); sert bir çip için flex: 0 0 auto.

Flex shorthand

css

.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — bir öğe, farklı çapraz hizalama

Tek bir çocuk için konteynerin align-items değerini geçersiz kılın. Bir rozetin başlangıca yapışması, kardeşlerin ortada kalması gerektiğinde işe yarar.

Align-self override

css

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

.row .note {
align-self: flex-start;
}

Sakin bir flex öğe alışkanlığı

Önce istenen boyut için basis, sonra grow/shrink çarpanları, sonra toparlamak için kısayol. align-self’i seyrek kullanın. Klavye ve ekran okuyucu akışını bozan order oyunlarından kaçının — medya sorgulu flex kalıplarını Flex Responsive’e bırakın.

Named item roles

css

.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

Kendiniz deneyin

main + aside satırı yapın; main’e flex-grow: 1 verin.
aside’ı flex-basis: 14rem ve flex-shrink: 0 ile ayarlayın.
Bir ikonu flex-shrink: 0 ile koruyun.
grow/shrink/basis’i flex kısayoluyla yeniden yazın.
Bir çocuğun çapraz hizalamasını align-self ile geçersiz kılın.

Sık yapılan hatalar

flex-grow’u öğe yerine konteynere koymak
width ile flex-basis’i karıştırıp flex hesabının neden uyuşmadığını merak etmek
order ile yeniden sıralayıp sekme/kaynak sırasını bozmak
shrink varsayılanda kaldığı için logoların ezilmesine izin vermek
Bu dersi Flex Responsive modülü gibi ele almak

Özet

Flex öğeleri büyüme, küçülme ve başlangıç basis’ini kontrol eder
flex-grow boş alanı paylaşır; flex-shrink baskıyı paylaşır
flex-basis ana eksendeki flex başlangıç boyutudur
flex kısayolu ve align-self tek tek çocukları inceler
Duyarlı flex kalıpları sırada; order’ı dikkatli kullanın

🧠 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

❓

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

Dil