CSS Flex Konteyner
Flexbox giriş dersi ebeveyni konteynere dönüştürdü. Bu ders konteynerde kalır: ana ekseni seçin, alanı dağıtın, çapraz eksende hizalayın ve satırları kaydırın. Öğe büyümesi (flex-grow, flex-basis) Flex Items dersini bekler.
Bir flex konteyner araç seti
📊 Flex konteynere kısa bakış
| Özellik | Günlük iş |
|---|---|
flex-direction |
Ana ekseni ayarlar: row, column veya reverse varyantları |
justify-content |
Öğeleri ana eksen boyunca dağıtır |
align-items |
Öğeleri çapraz eksende hizalar (tek satır) |
flex-wrap |
Öğelerin yeni satırlara kaymasına izin verir |
align-content |
Birden fazla flex satırını çapraz eksende paketler |
gap |
Öğeler (ve satırlar) arasında margin kavgası olmadan boşluk bırakır |
Unutmayın: justify ana eksende yürür; align çapraz eksende. flex-direction değerini column yapınca bu roller eksenlerle birlikte döner.
flex-direction — ana ekseni seçin
Varsayılan row. Yan menü veya form grupları gibi dikey yığınlar için column kullanın. Reverse varyantları görsel sırayı çevirir — okuma sırasının mantıklı kaldığını kontrol edin.
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
justify-content — ana eksen dağılımı
Boş alanı ana eksen boyunca dağıtın: flex-start, center, flex-end, space-between, space-around, space-evenly. Başlıklar çoğu zaman space-between ister.
.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}
align-items — çapraz eksen hizalaması
Tek satırda align-items, satırda yükseklik/dikey konumu (veya sütunda yatay konumu) kontrol eder. Varsayılan stretch; center günlük UI tutkalıdır.
.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
Wrap ve align-content
flex-wrap: wrap ile fazla öğeler yeni satırlar oluşturur. align-content, çapraz eksende boş alan varken bu satırları paketler — wrap nowrap ise pek işe yaramaz.
.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}
Sakin bir konteyner alışkanlığı
Önce direction, sonra justify, sonra align-items, gerekirse wrap. Oluklar için gap kalsın. Öğe başına büyümeyi sonraki derse saklayın — 2D sayfa ızgaralarını da sonra CSS Grid’e bırakın.
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Kendiniz deneyin
flex-direction: columnve üç blokla bir.stackkurun.- Geniş bir çubukta
justify-content: space-betweenilecenterkarşılaştırın. min-heightyükseltipalign-items: stretchilecenterdeneyin.- Chip’leri kaydırıp
align-content: flex-startbakın. - Bir cümle yazın: hangi özellikler sıradaki öğelerde, konteynerde değil?
Yaygın hatalar
- Yön değişince justify ile align’ı zihinde karıştırmak
- Klavye/okuma sırasını kontrol etmeden
row-reversekullanmak nowrapikenalign-content’ten etki beklemekflex-grow’u öğe yerine konteynere koymak- Flexbox konteyner özelliklerinden tam 2D Grid düzeni istemek
Özet
- Konteyner özellikleri yön, dağılım, hizalama ve wrap’i yönetir
flex-directionana ekseni tanımlarjustify-contentilealign-itemsana ve çapraz ekseni izler- Wrap çok satırlı paketleri açar;
align-contento satırları paketler - Öğe düzeyinde büyüme Flex Items dersini bekler
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 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