Frontend Academy · Ders

Display: block inline flex grid Temelleri

display değerleri arasında geçiş yapın ve block, inline, flex ve grid'in içeriği nasıl farklı düzenlediğini görün.

Display: block inline flex grid Temelleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

display Özelliği

display özelliği, yerleşim için en önemli CSS özelliğidir. Bir öğenin yerleşim akışına nasıl katılacağını ve alt öğelerinin nasıl düzenleneceğini denetler. En sık kullanılan değerler şunlardır: blok, satır içi, satır içi blok, esnek, ızgara ve hiçbiri.

display: block

Blok öğeler kapsayıcılarının tam genişliğini kaplar ve yeni bir satırda başlar. Örnekler: <div>, <p>, <h1>. Blok öğelerde genişlik, yükseklik, kenar boşluğu ve dolgu ayarlayabilirsiniz.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Satır içi öğeler metin içinde akar — yeni bir satırda başlamaz. Örnekler: <span>, <a>, <strong>. Genişlik, yükseklik ve dikey kenar boşluklarının satır içi öğeler üzerinde etkisi yoktur.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block her ikisini birleştirir: öğe satır içinde akar (metin gibi), ancak genişlik, yükseklik ve dikey kenar boşluğunu (blok gibi) kabul eder. Metin satırında yan yana durması gereken düğmeler ve rozetler için kullanışlıdır.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none, öğeyi yerleşimden tamamen kaldırır — hiç yer kaplamaz. Öğeyi gizlerken kapladığı alanı korumak için visibility: hidden kullanın.

Esnek Düzen — Tek Boyutlu Yerleşim

display: flex, bir öğeyi esnek kapsayıcıya dönüştürür. Doğrudan alt öğeleri, bir satır (varsayılan) veya sütun boyunca kendilerini düzenleyen esnek öğelere dönüşür. Esnek düzen, alanı dağıtma ve öğeleri hizalama konusunda başarılıdır.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Temel Esnek Düzen Özellikleri

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Izgarası — İki Boyutlu Yerleşim

display: grid, bir öğeyi ızgara kapsayıcısına dönüştürür. Satır ve sütunları grid-template-columns ve grid-template-rows ile tanımlarsınız. Izgara, sayfa yerleşimleri ve kart ızgaraları için idealdir.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

fr Birimi

fr (kesir) birimi, kullanılabilir alanı dağıtır. grid-template-columns: 1fr 2fr 1fr, ortadaki sütunun diğerlerinin iki katı kadar alan kapladığı üç sütun oluşturur.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Esnek Düzen ile Izgara Arasında Seçim

Esnek düzeni tek boyutlu yerleşimler (bir düğme satırı, bir kart yığını) için kullanın. Izgarayı iki boyutlu yerleşimler (bir sayfa iskeleti, açıkça belirtilmiş satır ve sütunlara sahip bir fotoğraf galerisi) için kullanın. İkisi aynı sayfada birlikte bulunabilir.

display: none ve visibility: hidden

display: none: yerleşimden kaldırılır, ekran okuyucuları tarafından erişilemez. visibility: hidden: görünmezdir, ancak yer kaplamaya ve erişilebilirlik ağacında bulunmaya devam eder. opacity: 0: görünmezdir, ancak yer kaplar ve erişilebilirdir.

Hızlı Kontrol

Birden çok satır ve sütuna sahip duyarlı bir kart ızgarası yerleştirmeniz gerekiyor. En iyi başlangıç noktası hangi display değeridir?

Özet: display Değerleri

Blok tam genişliği kaplar. Satır içi, metinle birlikte akar. Satır içi blok her ikisini birleştirir. Esnek düzen, alt öğeleri tek boyutta düzenler. Izgara, alt öğeleri iki boyutta düzenler. Hiçbiri, öğeyi yerleşimden kaldırır. Bunlarda ustalaşarak web üzerindeki her yerleşimi denetleyebilirsiniz.

Sıkça Sorulan Sorular

“Display: block inline flex grid Temelleri” dersi ücretsiz mi?

Evet — “Display: block inline flex grid Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Display: block inline flex grid Temelleri” dersinde ne öğreneceğim?

display değerleri arasında geçiş yapın ve block, inline, flex ve grid'in içeriği nasıl farklı düzenlediğini görün. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Display: block inline flex grid Temelleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Seçiciler ve Basamaklandırma
Renkler, Tipografi ve Kutu Modeli
Display: block inline flex grid Temelleri
Konumlandırma: relative absolute fixed sticky

← Frontend Academy Sayfasına Dön