1️⃣ display Nedir?

display özelliği, bir HTML elementinin belge akışı (document flow) içerisindeki davranışını belirler.

Bu özellik sayesinde bir elementin:

• Satır içi mi yoksa blok seviyesinde mi davranacağı
• Diğer elementlerle nasıl hizalanacağı
• Ne kadar yer kaplayacağı
• Layout sistemine (Flexbox, Grid vb.) dahil olup olmayacağı

kontrol edilir.

Modern web tasarımında display, layout sistemlerinin temel yapı taşıdır.

2️⃣ display: block

📌 Kavramsal Açıklama

Block seviyeli elementler, sayfa düzeninde bağımsız bir satır işgal eder. Varsayılan olarak bulunduğu satırın tamamını kaplar ve kendisinden sonra gelen elementi yeni satıra iter.

Yani her block element, kendi alanını oluşturur.

🔎 Teknik Özellikler

• Yeni satırdan başlar
• Varsayılan genişlik: %100
• width ve height verilebilir
• Tüm yönlerde margin ve padding uygulanabilir
• Dikey boşluk oluşturur

📌 Varsayılan Block Elementler

• <div>
• <p>
• <section>
• <article>
• <header>
• <footer>

💡 Ne Zaman Kullanılır?

• Sayfa bölümleri oluştururken
• Layout iskeleti kurarken
• Büyük yapısal alanlar tanımlarken

3️⃣ display: inline

📌 Kavramsal Açıklama

Inline elementler metin akışı içerisinde davranır. Bir paragraf içindeki kelimeler gibi yan yana dizilirler ve yeni satıra geçmezler.

Yani bir inline element, sadece içeriği kadar yer kaplar.

🔎 Teknik Özellikler

• Yeni satırdan başlamaz
• Sadece içerik kadar genişlik alır
• width ve height genellikle etkili değildir
• Dikey margin uygulanamaz
• Metin hizalamasına tabidir

📌 Varsayılan Inline Elementler

• <span>
• <a>
• <strong>
• <em>

💡 Ne Zaman Kullanılır?

• Metin içinde stil vermek
• Link tanımlamak
• Küçük vurgular yapmak

4️⃣ display: inline-block

📌 Kavramsal Açıklama

Inline-block, inline ve block davranışının birleşimidir.

• Inline gibi yan yana durur
• Block gibi genişlik ve yükseklik alabilir

Bu nedenle buton grupları gibi yapılarda sık kullanılır.

🔎 Teknik Özellikler

• Yeni satırdan başlamaz
• width ve height verilebilir
• Margin ve padding tam çalışır
• Yan yana hizalama mümkündür

💡 Ne Zaman Kullanılır?

• Yan yana dizilmiş butonlar
• Menü öğeleri
• Kart yapıları (Flex öncesi dönemde yaygındı)

5️⃣ display: flex

📌 Kavramsal Açıklama

Flexbox, tek boyutlu (1D) layout sistemidir. Öğeleri bir eksen boyunca hizalamak ve dağıtmak için geliştirilmiştir.

Flex sisteminde iki temel kavram vardır:

• Flex Container (parent)
• Flex Items (child)

🔎 Teknik Özellikler

• Varsayılan yön: yatay (row)
• justify-content → Ana eksende hizalama
• align-items → Çapraz eksende hizalama
• flex-grow, flex-shrink, flex-basis

📌 Avantajları

• Kolay ortalama (horizontal + vertical)
• Responsive tasarıma uygun
• Dinamik boşluk dağılımı

💡 Ne Zaman Kullanılır?

• Navbar yapısı
• Kartları hizalama
• Öğeleri ortalama
• Responsive satır/sütun düzenleri

6️⃣ display: grid

📌 Kavramsal Açıklama

Grid, iki boyutlu (2D) layout sistemidir. Hem satır hem sütun üzerinde kontrol sağlar.

Flex tek eksenlidir. Grid ise iki eksende birden çalışır.

🔎 Teknik Özellikler

• grid-template-columns
• grid-template-rows
• grid-area
• gap
• Hücre bazlı yerleşim

📌 Avantajları

• Karmaşık layoutlar
• Dashboard tasarımları
• Galeri sistemleri
• Duyarlı (responsive) yapılar

💡 Ne Zaman Kullanılır?

• Sayfa iskeleti kurarken
• Ana layout yapısında
• Birden fazla satır ve sütun gerektiren tasarımlarda

7️⃣ display: none

📌 Kavramsal Açıklama

Bir elementi tamamen belge akışından çıkarır. Sayfada görünmez ve yer kaplamaz.

Bu durum elementin DOM’da var olduğu ancak render edilmediği anlamına gelir.

🔎 Teknik Özellikler

• Yer kaplamaz
• Tıklanamaz
• Layout yeniden hesaplanır
• SEO açısından dikkatli kullanılmalıdır

📌 Karşılaştırma

🎯 Profesyonel Özet