- Konu sahibi
- #1
CSS
Aşağıdaki tam örneği
Kartlar yeterli alan varsa aynı satırda görünür.
Hayır.
display özelliği, bir HTML elementinin sayfa düzeninde nasıl kutu oluşturacağını ve içindeki çocuk elementleri nasıl yerleştireceğini belirler. Başka bir deyişle elementin satır içinde mi, ayrı bir blok olarak mı, flex veya grid kapsayıcısı olarak mı davranacağını kontrol eder. Örneğin display: none elementi yerleşimden tamamen çıkarırken display: flex çocukları esnek kutu düzeniyle hizalar.Dış ve iç yerleşim davranışı
display iki davranışı etkiler: Elementin dışarıya karşı nasıl yerleşeceği ve kendi içindeki çocukları nasıl düzenleyeceği. Örneğin display: flex normal akışta blok düzeyinde bir flex kapsayıcısı oluşturur; inline-flex aynı iç düzeni satır içi bir dış kutuyla sunar. Doğrudan çocukların yerleşimi ile kapsayıcının sayfadaki yeri ayrı kararlardır.Somut örnek
Aşağıdaki tam örneği
display.html olarak kaydedip açabilirsiniz. Haricî dosya veya JavaScript gerekmez:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Display örneği</title>
<style>
.kartlar { display: flex; gap: 16px; flex-wrap: wrap; }
.kart {
box-sizing: border-box; flex: 1 1 220px;
padding: 16px; border: 1px solid #666; border-radius: 4px;
overflow-wrap: anywhere;
}
</style>
</head>
<body>
<div class="kartlar">
<div class="kart">Birinci kart</div>
<div class="kart">İkinci kart</div>
<div class="kart">Üçüncü kart</div>
</div>
</body>
</html>Kartlar yeterli alan varsa aynı satırda görünür.
flex-wrap: wrap dar alanda alt satıra geçmelerini, gap aralarındaki boşluğu sağlar. Tarayıcı genişliğini daraltarak farklı satır sayılarını gözlemleyin; box-sizing dolgu ve kenarlığı boyut hesabına dahil eder.Değerleri karşılaştırma
| Değer | Davranış | Yaygın kullanım |
|---|---|---|
block | Yeni satırdan başlar ve genellikle kullanılabilir genişliği kaplar. | Bölüm, kutu veya ana içerik alanı |
inline | Metin akışı içinde yer alır; genişlik ve yükseklik davranışı sınırlıdır. | Metin içindeki bağlantı veya vurgu |
inline-block | Satır içinde kalır, ancak blok gibi genişlik ve yükseklik alabilir. | Yan yana duran küçük kutular |
flex | Çocukları tek boyutlu esnek düzenle yerleştirir. | Yatay menü, buton grubu, hizalama |
grid | Çocukları satır ve sütunlardan oluşan iki boyutlu düzende yerleştirir. | Kart listesi ve sayfa yerleşimi |
none | Elementi ve çocuklarını görünmez yapar, yerleşimde alan bırakmaz. | Açılır menü veya koşullu içerik |
Hangi değeri seçmelisiniz?
- Elementin yeni satırdan başlamasını istiyorsanız
display: blockkullanın. - Element metnin içinde kalacaksa
display: inlinekullanın. Genişlik veya yükseklik vermeniz gerekiyorsainline-blockdaha uygundur. - Çocukları yatay veya dikey eksende hizalayacaksanız
display: flexseçin. - Satır ve sütunları birlikte kontrol edeceğiniz bir düzen kuracaksanız
display: gridkullanın. - İçeriği geçici olarak kaldırmak istiyorsanız
display: noneuygulayın.
display: none elementin yerleşimde alan kaplamamasını sağlar. visibility: hidden ise elementi görünmez yapar ancak normalde kaplayacağı alanı korur. İkisi de genel olarak öğeyi erişilebilirlik ağacından çıkarır; visibility: hidden ekran okuyucuya açık tutma yöntemi değildir. Ekranda gizli ama yardımcı teknolojilere açık metin için ayrı bir erişilebilir gizleme tekniği gerekir.Sık yapılan hatalar
display: flex verdiğiniz elementin kendisi flex olur; doğrudan çocukları flex öğelerine dönüşür. Torun elementleri otomatik olarak aynı flex düzenine katılmaz. Ayrıca inline elementlerde genişlik ve yükseklik beklendiği gibi çalışmayabilir. Bu durumda inline-block, block veya uygun bir flex/grid yapısı seçilmelidir.display: none uygulandığı halde element görünüyorsa daha güçlü bir seçici, satır içi stil veya JavaScript tarafından sonradan verilen başka bir display değeri kuralınızı eziyor olabilir. Tarayıcı geliştirici araçlarında ilgili elementin "Computed" stillerini kontrol ederek hangi kuralın geçerli olduğunu bulun.Sık sorulan sorular
display özelliği elementin HTML anlamını değiştirir mi?
Hayır.
display görsel yerleşim davranışını değiştirir; elementin HTML anlamını otomatik olarak başka bir elemente dönüştürmez. Bu nedenle düzen için CSS, anlam için uygun HTML elementi kullanılmalıdır.display değerleri geçiş animasyonunda neden hemen değişir?
display sayısal bir ölçü gibi kesintisiz ara değerler üretmez; ayrık bir değişimdir. Destekleyen tarayıcılarda transition-behavior: allow-discrete ile opacity birlikte kullanılabilir. none durumundan ilk görünüş geçişinde @starting-style da gerekebilir; hedef tarayıcı desteğini kontrol edin.