Embedded Files
Hazırlayan : Oktay Agdag
Yayınlama Tarihi: 27.03.2023
Son Düzenleme : 17.04.2023
CSS display Özelliği Nedir?
Web tarayıcıları her HTML öğesini bir kutu gibi ele almaktadır.Ancak bu tarayıcılar öğelerin anlam doğası gereği, tüm kutuları aynı şekilde sayfanıza yerleştirmezler. Her HTML öğesinin, kendi türüne bağlı olarak varsayılan bir görüntüleme değeri vardır. Display özelliği ile HTMLelementlerinin nasıl görüneceği bilgisini veriririz. CSS'de display özelliği, düzeni kontrol etmek için en önemli CSS özelliğidir. Sayfamızın tasarımında elementlerin nereye konumlandıracağımızı, görünür olup olmamasını, elementin hangi element gibi davranacağını belirlemeye yarar.
Display için değerlendirilebilecek en temel özellikleri aşağıda kullanım örneğinde görebilirsiniz.
.classname {
display: none | block | inline | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table
}
Çoğu öğenin varsayılan görüntü değeri block veya inline şeklindedir:
Block Level : Blok Seviyesi Etiketler
Inline Level : Satır İçi Etiketle
block
Bir blok düzeyi eleman her zaman yeni bir satıra başlar ve mevcut olan tüm satır genişliği alır. (mümkün olduğunca sola ve sağa doğru uzanır) Bir blok, diğerinin üstünde istiflenir ve mevcut genişliği tamamen işgal eder. Blok düzeyindeki öğeler birbirinin içine yerleştirilebilir ve satır içi düzeydeki öğeleri sarabilir. Çoğu zaman, paragraflar gibi daha büyük içerik parçaları için kullanılan blok düzeyinde öğeler görürüz.
.classname {
display: block;
}
Aşağıdaki görselde display değeri block olan Box1, Box2, Box3 alanları için her birinin yeni bir satırda başladığını ve tüm satır genişliğini aldığını görebiliriz.
Blok Seviyeli öğelerden bazıları aşağıda listelenmiştir;
<div> Div sayfanın her yerine yerleştirebileceğiniz bir bloktur. İçine her türlü içerik girilebilir
<hx> Bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. "x" 1 ile 6 arasında değer alır
<p> Paragraf oluşturmak için kullanılır
<table> Tablo eklemek için kullandığımız etikettir
<ul>,<ol>,<dl>,<li> Liste oluştururken kullandığımız etiketlerdir
<form> Html kontrolleri aracılığıyla kullanıcılardan toplanan bilgileri server'a göndermek için kullanılır
<header> Web sayfasının üst bandını oluşturan etikettir
<footer> Web sayfasının alt bant içeriklerini oluşturur
<section> Sayfa içeriklerini bölümlendirmek için kullanılır
inline
Satıriçi bir öğe yeni bir satıra başlamaz. Bir belgenin normal akışına girer, birbiri ardına sıralanırlar ve yalnızca kendi içeriğinin genişliğini korur'lar. Satıriçi düzeydeki öğeler birbirinin içine yerleştirilebilir; Ancak, blok düzeyindeki öğeleri kaydıramazlar.
.classname {
display: inline
}
Aşağıdaki görselde display değeri inline olan Box1, Box2, Box3 alanları için yeni bir satıra başlamadıkları ve kendi genişliğini koruduğunu görebiliriz.
Inline seviyeli öğelerden bazıları aşağıda listelenmiştir.
<a> Web sayfaları arasında geçişi sağlamak yani link vermek için kullanılır
<img> Web sayfanız için görüntü(resim) tanımlamanızı sağlar
<span> Satır içi gruplar sağlar
<strong> Bir yazının kalın görünmesini yani bold olmasını sağlamaktadır
<em> Bir HTML öğesinin kapsayıcısının font-size metin büyüklüğü ile değişkenlik gösteren bir ifadedir.
inline-block
Inline-block özelliği block ile inline özelliklerinin bir birleşimi olarak ifade edilebilir. Yani, elementler aynı satırda konumlandırılırken yükseklik (height) ve genişlik (width) özelliklerine de müdahale edebilmekteyiz. Bu sebeple çoğu zaman layout sürecinde (menu, card, slider vb.) aktif olarak bu özellikten faydalanmaktayız.
.classname {
display: inline-block;
}
Aşağıdaki görselde Box1, Box2, Box3 alanlarının aynı satırda konumlandıklarını ancak genişliklerinde farklılıklar olduğunu gözlemleyebiliriz.
flex
CSS3 ile birlikte gelen flex sayfa içindeki elemanların kolayca yerleştirilmesi için kullanılan bir özelliktir. Bu özellik ile esnek bir kutu içerisinde öğeler ana eksen doğrultusunda kutuya sığmak için boyutları büyür ya da küçülür. Display özelliğine flex değerini verdiğimiz eleman artık esneklik kazanmış olur.
.classname {
display: flex;
}
Esnekliği kazandırdığımız elemana artık aşağıdaki özellikleri vererek istediğimiz gibi yönetebiliriz.
flex-direction
Öğelerin yönünü belirlemek için kullanılır. Varsayılan olarak flex container yataya doğru uzar. Dolayısı ile bu kapsayıcı içindeki tüm öğeler yan yana listelenir.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row (varsayılan) = soldan sağa doğru sıralar.
row-reverse = sağdan sola doğru sıralar.
column = yukarıdan aşağı doğru sıralar.
column-reverse = aşağıdan yukarı doğru sıralar.
flex-wrap
Ön tanımlı olarak flex item’lar tek bir satıra sığmaya çalışırlar. Diğer özelliklerle bu davranışı değiştirebilir, item’ların belirtilen şartlar dahilinde satırlara yayılmasını sağlayabiliriz.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap = Container içerisindeki tüm item’ları tek bir satıra sığacak şekilde, yan yana konumlandırır. Varsayılan seçenektir.
wrap = Item’lar gerektiğinde alt satırlara yukarıdan aşağıya doğru sıralanırlar.
wrap-reverse: = Item’lar gerektiğinde alt satırlara aşağıdan yukarıya doğru sıralanırlar.
flex-flow
flex-flow aslında flex-direction ve flex-wrap özelliklerinin kısayoludur. Bu kısayol sayesinde, her iki özelliğin değerlerini bir arada kullanabilmekteyiz. Aşağıdaki iki tanım da aynı sonucu sağlayacaktır.
.flex-container {
flex-direction: column;
flex-wrap: wrap;
}
.flex-container {
flex-flow: column wrap;
}
align-items
Öğelerin dikey eksende hizasını ayarlamak için kullanılır.
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch (varsayılan) = Hizalama yapmaz, öğelerin yüksekliklerini kapsayıcıya göre uzatır.
flex-start = Öğeleri yukarıya doğru hizalar.
flex-end = Öğeleri aşağıya doğru hizalar.
center = Öğeleri ortaya doğru hizalar.
baseline = Öğelerin içindeki ilk satırı baz alarak ortalama yapar.
justify-content
Öğelerin yatay eksende hizasını ayarlamak için kullanılır.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start (varsayılan) = Öğeleri başlangıç noktasında (sola dayalı) hizalar.
flex-end = Öğeleri bitiş noktasında (sağa dayalı) hizalar.
center = Öğeleri ortada hizalar.
space-between = İlk öğe sola dayalı, son öğe sağa dayalı ve diğerleri ortalı olacak şekilde hizalar.
space-around = İlk ve son öğe hariç diğerlerinin arası eşit olacak şekilde hizalar.
space-evenly = Tüm öğelerin arası aynı eşitlikte olacak şekilde hizalar.
align-content
Bu özellik sayesinde, çok satırlı yapılarda item’ların dikey olarak hizalandırılmasını sağlayabiliriz.
.container {
align-content: stretch | flex-start | flex-end | center | space-between | space-evenly;
}
stretch: Item’ları hizalamaz, ancak yüksekliklerini uzatır. Varsayılan seçenektir.
flex-start: Item’ları dikey eksende, üst çizgiye göre hizalar.
flex-end: Item’ları dikey eksende alt çizgiye göre hizalar.
center: Item’ları dikey eksende orta çizgiye göre hizalar.
space-between: İlk satıdaki item’ları üst çizgiye, son satırdaki item’ları ise alt çizgiye hizalar. Kalan item’lar ise ortalanır.
space-evenly: Item’lar satırlar araları eşit boşluklarda olacak şekilde dikey eksende ortalanır.
grid
Flexbox özelliği gibi grid özelliği de sayfa yerleşimleri için büyük avantajlar getirir. Mobil tasarımlar ve veri yerleşimleri için güzel çözümler sunar. Flexbox tek boyutlu kodlamamızı sağlıyorken, grid layout modelinde ise önceden tanımlanmış esnek bir container’a children elementlerin her iki boyutta da istenildiği gibi hizalanmasını sağlar.
.classname {
display: grid;
}
Display özelliğine grid değerini verdiğimiz elemen ızgara sisteminde elemanları taşıyan taşıyıcı haline gelir. Artık ızgara sistemi oluşturulabilir.
Izgara sistemi nedir?
Izgara veya kılavuz sistemi web sayfasındaki elemanları satır ve sütun olarak konumlandırmak için kullanılan bir yapıdır. Izgara sistemi yapısı sırasıyla tablo, css position, css float ve css flex gibi özelliklerle oluşturulabiliyordu. Bu özelliklerle kullanımında fazla kod yazımı, çeşitli hesaplamaların yapımı ve sayfa elemanlarının kayması gibi çeşitli istenmeyen durumlar meydana geliyordu. Bu sebeplerden dolayı kolay bir ızgara sistemi oluşturmak için CSS3 ile birlikte grid özelliği gelmiştir.
HTML kodu
<div class="kapsayici">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
CSS kodu
.kapsayici {
display: grid;
}
Sınıfına "kapsayici" adı verdiğimiz div elemanı, içine aldığı tüm div elemanları Css kodunda verdiğimiz display:grid değeri sayesinde taşıyan eleman olarak tanımlanır.Varsayılan olarak elemanlar kapsayıcı içinde bir sütun boyunca konumlanır.
Izgara düzeni oluşturma
Izgara sistemindeki en önemli kısım uygun ızgara düzeninin oluşturulmasıdır.Izgara düzeni sütun, satır ve özel olmak üzere 3 farklı yol ile belirlenir.
Sütun düzeni belirleme
Izgara sistemindeki sütun düzeni grid-template-columns özelliği ile belirlenir.
Aşağıdaki örnekte ilk ve üçüncü sütun 400px genişliğine ikinci sütun ise ekran genişliğine göre otomatik genişliğe sahiptir.
.kapsayici {
display: grid;
grid-template-columns: 400px auto 400px;
}
Satır düzeni belirleme
Satır düzeni belirlemek pek kullanılan bir yöntem değildir.Satır sayısı belirleme işlemi yerine genellikle satır yüksekliği belirleme kullanılır.
Aşağıdaki örnek her satır yüksekliğini 100px olarak belirler.
.kapsayici {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
Boşluk Belirleme
Izgara sisteminde elemanlar arası boşluk bırakmak için grid-column-gap, grid-row-gap ve ikisinin birleşimi grid-gap özelliği kullanılır.
Aşağıdaki örnek elemanlar arasındaki satır boşluğu 20px sütun boşluğu 50px olarak belirler.
.kapsayici {
display: grid;
grid-template-columns: 400px auto 400px;
}
Özelliğin margin özelliğinden farkı sadece elemanlar arası boşluk bırakmasıdır.
Sütun Konumlandırma
Izgara sisteminde elemanları sütun konumlandırma için grid-column-start, grid-column-end ve ikisinin birleşimi grid-column özelliği kullanılır.
Aşağıdaki örnekte kapsayıcı içindeki ilk eleman 1 ve 3 sütun arası yere konumlanacaktır.
.kapsayici {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.kapsayici > div:nth-child(1){
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3;
}
Satır Konumlandırma
Izgara sisteminde elemanları satır konumlandırma için grid-row-start, grid-row-end ve ikisinin birleşimi grid-row özelliği kullanılır.
Aşağıdaki örnekte kapsayıcı içindeki ilk eleman 1 ve 3 satır arası yere konumlanacaktır.
.kapsayici {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.kapsayici > div:nth-child(1){
grid-row-start: 1;
grid-row-end: 3;
grid-row: 1 / 3;
}
Yatay Hizalama
Izgara sistemindeki elemanları yatay olarak hizalamak için justify-content özelliği kullanılır.
Aşağıdaki örnekte space-evenly değeri kullanılmıştır.
.kapsayici {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: space-evenly;
}
Dikey Hizalama
Izgara sistemindeki elemanları dikey olarak hizalamak için align-content özelliği kullanılır.
Aşağıdaki örnekte space-evenly değeri kullanılmıştır.
.kapsayici {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 500px;
align-content: end;
}
Özel Izgara Düzeni
Izgara sistemindeki son ve en kolay ızgara düzeni belirleme yöntemi özel ızgara düzeni veya adlandırılmış ızgara düzenidir.
Özel ızgara düzeni grid-template-areas özelliği ile belirlenir.
Aşağıdaki örnek ızgara düzenindeki ilk 4 elemanı ust olarak adlandırır.
.kapsayici {
display: grid;
grid-template-areas: 'ust ust ust ust';
}
Adlandırılan bölüme eleman grid-area özelliği ile yerleştirilir.
.kapsayici {
display: grid;
grid-template-areas: 'ust ust ust ust';
}
.kapsayici > div:nth-child(8) {
grid-area: ust;
}
Adlandırılmış ızgara düzeni için yeni bir satır tanımlamak için grid-template-areas özelliğine yeni değerler eklenir.
.kapsayici {
display: grid;
grid-template-areas:
'ust ust . .'
'ust ust . .';
}
.kapsayici > div:nth-child(8) {
grid-area: ust;
}
table
Tablo olmayan elementin tablo gibi davranmasını istiyorsanız kapsayıcı elementi tablo elementi olarak düzenleyebilirsiniz. Aşağıdaki özelliklerle birlikte elementi tablo olarak yapıp içindeki öğeleri hücre gibi olmasını sağlayabilirsiniz.
.classname {
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
}
none
Bir elementi gizlemek (hide) istediğimizde display: none özelliğini kullanabiliriz. Bu sayede element bulunduğu alanda hiçbir etki oluşturmaksızın gizlenecektir. visibility: hidden kullanımında element sadece görünmez kılınır ve bulunduğu yeri işgal etmeye devam eder.
Net anlaşılması için aşağıdaki örnekle devam edelim, div için display: inline-block tanımını yapalım ve 3 child elementi yan yana dizelim.
.classname {
display: none;
}
2. child element için display: none özeliğini tanımladığımızda elementin tamamen ortadan kalktığını ve 3. child elementin 2. sıraya geçtiğini görebilirsiniz.
.classname {
visibility: hidden;
}
visibility: hidden kullanımında ise 2. elemenin işgal ettiği yer sabit kalmakta, sadece görünürlüğü değişmektedir. 3. child element yine bulunduğu konumda kalmaya devam edecektir.
Page updated
Report abuse