CSS Display

CSS Display Nedir?

CSS’de display özelliği, bir HTML elementinin nasıl görüntüleneceğini belirler. Bu özellik, elementin blok, inline, inline-block, grid, flex veya none olarak görüntülenmesini sağlar. Display özelliği, sayfanın tasarımını ve düzenini kontrol etmede önemli bir rol oynar. Her bir display değeri, farklı şekillerde etki gösterir ve elementin genişliği ve yüksekliği üzerinde farklı etkiler yapar.

Blok display, elementin kendisine ait bir satır alana sahip olmasını sağlar ve genellikle yeni bir satıra geçer. Blok display özellikli elementler, genellikle diğer elementlerden alt alta sıralanır ve genişliklerini ayarlamak için genellikle tam uzunluğu kullanır. Örneğin,

, ve

gibi elementler blok display özelliğine sahiptir.

Inline display, elementin içerik alanına sığabilmesi için ihtiyaç duyulan minimum genişliği almasını sağlar. Inline display özelliği ile elementler, diğer elementlerle aynı satırda yan yana yerleştirilir. Örneğin, ve gibi elementler inline display özelliğine sahiptir. Inline elementlerin genişlik ve yükseklik değerleri margin ve padding ile ayarlanabilir.

Inline-block display özelliği, hem blok display hem de inline display özelliklerini birleştirir. Bu özellikle elementler, blok gibi davranırken aynı zamanda diğer elementlerle aynı satırda yer alır. Inline-block display özelliği ile elementlerin genişlik ve yükseklik değerleri ayarlanabilir ve margin ile boşluk bırakılabilir. Örneğin, ve gibi elementler inline-block display özelliğine sahiptir.

• Blok display özelliği, elementin tam uzunluk almasını ve diğer elementlerden alt alta sıralanmasını sağlar.
• Inline display özelliği, elementin içeriğinin uzunluğuna göre minimum genişlik almasını ve diğer elementlerle yan yana yer almasını sağlar.
• Inline-block display özelliği, elementi hem blok gibi hem de inline gibi davranarak diğer elementlerle aynı satırda sıralanmasını sağlar.

Display Değeri	Özellikleri
block	Blok özelliği
inline	Inline özelliği
inline-block	Inline-block özelliği

Blok Display Kullanımı ve Özellikleri

Blok display, HTML’de bir elemanın blok düzenleyicisiyle nasıl görüntülendiğini kontrol etmek için kullanılan bir özelliktir. Blok display, elemanları diğer elemanların üzerine yığılmış bir şekilde görüntüler ve bir sonraki satıra geçmeden önce tam genişlikte bir konteyner oluşturur. Bu yazıda blok display’in kullanımını ve özelliklerini daha ayrıntılı olarak inceleyeceğiz.

Blok display özellikle başlıklar, paragraflar ve listeler gibi yapısal elementler için yaygın olarak kullanılır. Bir elemente blok display vermek için display: block; kodunu kullanırız. Bu element her zaman kendisiyle aynı satırda başlar ve bir sonraki satıra geçmeden önce tam genişlikte bir alan kaplar. Blok display özelliği, elemanların dikey hizalanmasını ve boyutlarını kontrol etmek için de kullanılabilir.

Blok display ayrıca CSS ile margin, padding ve border gibi diğer özellikleri de kontrol etmek için kullanılır. Blok display elemanları, içeriklerini saracak ve bir blok oluşturacak şekilde davranır. Bu da onları diğer elementlerden ayırır ve tasarımın düzenini sağlamaya yardımcı olur.

Inline Display Kullanımı ve Özellikleri

İnline Display Kullanımı ve Özellikleri: İnline display, HTML elementlerini yan yana hizalandırmak için kullanılan bir CSS özelliğidir. İnline display, elementlerin içeriğine uygun bir alan tahsis eder ve aynı satırda yer almasını sağlar. Bu özellik, örneğin metin içerikli elementleri hizalamak için oldukça kullanışlıdır.

İnline display kullanırken dikkate alınması gereken bazı önemli noktalar vardır. İlk olarak, inline elementler satırın aynı hizasında yer alır ve elementlerin boyutu içeriğine göre otomatik olarak belirlenir. Bu nedenle, boyut ayarlaması yapmak istiyorsanız, özel bir CSS özelliği kullanmanız gerekebilir.

İnline display kullanmanın avantajlarından biri, elementlerin yan yana hizalandığı için alan tasarrufu sağlamasıdır. Örneğin, bir sayfada yan yana sıralanacak olan bağlantıları düşünün. Bu bağlantıları inline element olarak işaretlerseniz, her biri ayrı bir satıra yerleştirilmez ve daha fazla içeriği aynı satırda gösterme imkanı sağlar.

• İnline elementler arasında boşluk bırakmak için margin veya padding kullanabilirsiniz.
• İnline elementler genellikle blok elementlerin içerisinde kullanılır.
• İnline elementlerin genellikle yükseklik ve genişlik değerleri dikkate alınmaz.

Özellik	Açıklama
display: inline	Elementi satırda, içeriğine uygun bir alan tahsis ederek hizalar.
display: inline-block	Elementi satırda hizalar, içeriğine uygun alanı tahsis eder ve boyut ayarlaması yapabilir.

Inline-Block Display Kullanımı ve Özellikleri

Inline-block display, CSS’de kullanılan farklı bir özelliktir. Bu özellik, bir elementin hem inline hem de block özelliklerini bir arada kullanmasını sağlar. Inline özelliği, elementin yan yana sıralanmasını, block özelliği ise yatay uzanmasını sağlar.

Bu özelliği kullanarak, çeşitli tasarım ihtiyaçlarınızı karşılayabilirsiniz. İster metinleri yan yana sıralamak ister blok elementleri yatay uzatmak için kullanabilirsiniz. Inline-block display’i kullanabilmek için “display: inline-block;” şeklinde bir CSS kodu kullanmanız gerekmektedir.

Inline-block display’in bir diğer özelliği, elementler arasında boşluk oluşturmamasıdır. Böylece elementler birbirine yapışık bir şekilde görüntülenir. Bununla birlikte, içeriğin sığmadığı durumlarda da otomatik olarak satır atlamakta ve diğer elementlerle çakışma sorunu yaşamamaktadır.

• Inline-block display, inline elementlerin özelliklerini taşırken, blok elementlerin özelliklerini de korur.
• Inline-block elementleri, iç içe geçirilebilir ve üzerlerine margin ve padding uygulanabilir.
• Inline-block elementler üst üste gelemezler, yan yana sıralanırlar.

Kod	Açıklama
<div style=”display: inline-block;”>Bu bir inline-block elementidir.</div>	Yan yana sıralanan bir inline-block elementi oluşturur.
<span style=”display: inline-block;”>Bu da bir inline-block elementidir.</span>	Yan yana sıralanan bir inline-block elementi oluşturur.

Grid Display Kullanımı ve Özellikleri

Grid display, CSS’de bir elementin dikey ve yatay olarak hücrelere ayrıldığı bir düzen oluşturmak için kullanılan bir yerleştirme sistemidir. Bu sistem, bir elementin içeriğini bir hücreye yerleştirmeye ve düzgün bir şekilde hizalamaya olanak tanır.

Grid Display Kullanımı:

• Grid display kullanmak için öncelikle “display: grid;” özellik değerini kullanmamız gerekmektedir.
• Bir elementi hücreye yerleştirmek için, “grid-column” ve “grid-row” özelliklerini kullanabiliriz.
• Hücreleri istediğimiz boyuta getirmek için “grid-template-columns” ve “grid-template-rows” özelliklerini kullanabiliriz.

Grid Display Özellikleri:

Özellik	Açıklama
display: grid;	Elementin grid display kullanacağını belirtir.
grid-template-columns	Hücrelerin yatayda nasıl genişleyeceğini belirler.
grid-template-rows	Hücrelerin dikeyde nasıl genişleyeceğini belirler.
grid-column	Bir elementi belirli bir sütuna yerleştirir.
grid-row	Bir elementi belirli bir satıra yerleştirir.

Grid display kullanmanın avantajlarından biri, kompleks düzenleri oluşturmanıza olanak tanımasıdır. Hücrelerin boyutlarını ve yerlerini esnek bir şekilde ayarlayabilir ve responsive bir tasarım oluşturabilirsiniz. Ancak, tarayıcı uyumluluğunu dikkate alarak grid display özelliklerini kullanmanız önemlidir.

Flex Display Kullanımı ve Özellikleri

Flex display, CSS’deki bir dizi özellikle birlikte kullanılarak, bir container içindeki elemanları esnek bir şekilde yönlendirmek ve düzenlemek için kullanılan bir tekniktir. Flex display, responsive tasarım ve düzen oluşturma açısından oldukça kullanışlıdır.

Bir container içindeki elemanları flex display ile düzenlemek için öncelikle container’a display: flex; özelliği verilmelidir. Bu sayede container içindeki elemanlar flex özelliklerine sahip olacak ve belirlenen düzenlemeleri uygulayabilecektir.

Flex display, birkaç farklı özelliği içerir. Bunlardan bazıları:

• justify-content: Elemanların yatay yönde hizalanmasını sağlar. Örneğin, “flex-start” elemanları sol kenara yaslar, “flex-end” sağa yaslar, “center” merkezler, “space-between” elemanları araya sıkıştırarak hizalar ve “space-around” elemanları araya dağıtarak hizalar.
• align-items: Elemanların dikey yönde hizalanmasını sağlar. Örneğin, “flex-start” elemanları üst kenara yaslar, “flex-end” alt kenara yaslar, “center” dikey olarak merkezler ve “stretch” elemanları doldurarak hizalar.
• flex-direction: Elemanların sıralanma yönünü belirler. Örneğin, “row” elemanları yatay şekilde sıralar, “column” dikey şekilde sıralar, “row-reverse” elemanları yatay şekilde ters sıralar ve “column-reverse” dikey şekilde ters sıralar.

Özellik	Açıklama
justify-content	Yatay hizalama
align-items	Dikey hizalama
flex-direction	Sıralanma yönü

None Display Kullanımı ve Özellikleri

None display, CSS’de bir öğenin görüntülenmemesi için kullanılan bir özelliktir. Bir öğeye none display özelliği verildiğinde, bu öğe hiçbir şekilde sayfada görünmez hale gelir. Yani, hem içeriği hem de yer kaplamasını kaybeder. None display, sayfada yer kaplamayan ve etkileşime girmeyen öğeler oluşturmak için kullanışlıdır.

None display kullanırken dikkat edilmesi gereken noktalar vardır. İlk olarak, none display özelliği verilen öğe, sayfada tamamen yokmuş gibi davranır. Yani, diğer öğelerin yerleşimini etkilemez. İkinci olarak, eğer none display özelliği verilen bir öğenin alt öğeleri varsa, bu alt öğeler de görünmez hale gelir. Ancak, alt öğelerin none display dışında farklı bir display özelliği varsa, bu özellikler korunur ve alt öğeler sayfada görüntülenebilir hale gelir.

None display özelliğinin kullanımı çeşitli senaryolarda faydalı olabilir. Örneğin, bir formda bulunan bir öğeyi geçici olarak gizlemek istediğinizde none display kullanabilirsiniz. Ayrıca, kullanıcı bazlı bir etkinlik olmadığı zamanlarda belirli bir öğeyi gizlemek için de none display özelliğinden yararlanabilirsiniz.

Summing up, none display özelliği, öğelerin sayfada gizlenmesi için kullanılan bir CSS özelliğidir. Öğenin hem içeriğini hem de yer kaplamasını kaybetmesini sağlar. None display, geçici olarak öğeleri gizlemek veya etkileşime girmemesini istediğiniz öğeler oluşturmak için kullanabilirsiniz.

None Display Özelliklerinin Özeti:

• Öğeyi tamamen sayfada görünmez hale getirir.
• Öğenin içeriğini ve yer kaplamasını kaybettirir.
• Alt öğelerini de görünmez hale getirir.
• Diğer öğelerin yerleşimini etkilemez.
• Alt öğelerin diğer display özelliklerini korur.
• Geçici olarak öğeleri gizlemek için kullanılabilir.

None Display Kullanımı Örnekleri:

Örnek 1	Örnek 2
Bir formun hata mesajını görüntülemek için none display kullanabilirsiniz.	Bir sayfanın yüklenme durumu göstergesini none display kullanarak gizleyebilirsiniz.

Sık Sorulan Sorular

CSS Display Nedir?

CSS Display, html elementlerinin görünürlük ve düzenini ayarlamak için kullanılan bir özelliktir. Bu özellik, elementleri farklı şekillerde, blok, inline, inline-block, grid, flex veya none olarak görüntüleme imkanı sağlar.

Blok Display Kullanımı ve Özellikleri

Blok display, elementleri diğer elementlerin yanına yerleşmeden ve boşluk oluşturmadan blok şeklinde yerleştirir. Bu şekilde kullanılan elementler genellikle tek bir sıradan oluşan bloklar şeklinde düzenlenir.

Inline Display Kullanımı ve Özellikleri

Inline display, elementleri metin içindeki gibi sıralar. Daha sonra gelen element, bir öncekilere yan yana veya devam edebilir. Bu şekilde kullanılan elementler, diğer inline elementlerle birlikte yer alır ve satırın hizasında yerleşir.

Inline-Block Display Kullanımı ve Özellikleri

Inline-block display, elementleri bir blok gibi yerleştirirken, diğer elementlerle birlikte aynı satırda yer almasını sağlar. Bu şekilde kullanılan elementler, blok elementler gibi özelliklerine sahip olurken, yan yana yerleşebilirler.

Grid Display Kullanımı ve Özellikleri

Grid display, elementleri ızgara şeklinde düzenlemek için kullanılır. Bu şekilde kullanılan elementler, gridin satırlarında ve sütunlarında yer alabilir ve hizaya getirilebilir.

Flex Display Kullanımı ve Özellikleri

Flex display, elementleri esnek bir davranışla düzenlemek için kullanılır. Bu şekilde kullanılan elementler, diğer elementlere göre büyüyebilir, daralabilir veya sıralanabilir. Böylece, farklı cihazlarda daha uyumlu bir düzen elde edebilir.

None Display Kullanımı ve Özellikleri

None display, elementi görüntülenmez hale getirir. Bu şekilde kullanılan element, sayfada boşluk bırakmaz ve etkisiz hale gelir.