📖 Düzen (Layout)
display: flex (Esnek Kutu Düzeni - Flexbox)
Öğeleri tek bir eksende (yatay veya dikey) esnek şekilde hizalayan, dağıtan ve boşlukları yöneten modern CSS düzen modelidir.
⚡ Sözdizimi (Syntax)
display: flex | inline-flex;
🛠️ Pratik Kullanım Örnekleri
📌 Öğeleri Yatayda ve Dikeyde Tam Ortalamak
.parent {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
📌 Mobil Ekranda Sütun Düzenine Geçme
.nav-list {
display: flex;
flex-direction: column;
}
💡
Mühendislik İpucu & En İyi Pratik:
Öğeler arasına boşluk bırakmak için `margin` yerine modern `gap: 1.5rem;` özelliğini kullanın.
İlgili Kılavuzlar
display: flex (Esnek Kutu Düzeni - Flexbox)
display: grid (İki Boyutlu CSS Izgara Düzeni)
position: sticky (Kaydırmaya Bağlı Sabitlenen Başlıklar)
backdrop-filter (Buzlu Cam & Glassmorphism Efekti)
clamp() (Akıcı Tipografi ve Dinamik Boyutlandırma)
:has() Ebeveyn Seçici (Parent Selector)
aspect-ratio (En-Boy Oranı Kilitleme)