css display özelliği, Html elementinin görüntülenme özelliğini belirler. Her Html elementinin bir varsayılan display değeri vardır. Mesela p, div block düzeyli element iken span, i, b elementleri satır düzeyli elementtir. Html sayfamızın daha güzel olması için kullandığımız elemanların varsayılan görüntülenme (display) değerini değiştirmemiz gerekebilir.
Aldığı değerler :
inline : Html elementine satır düzeyli element olma özelliğini atar. ( Bu özellikte genişlik ve yükseklik içerik kadar olur. span ın özelliği)
block : Html elementine blok düzeyli element olma özelliği atar.
inline-block : Html elementine hem satır hemde blok düzeyli element olma özelliği atar.
none : Html elementi sayfada görünmez.
run-in : Html elementinin varsayılan display özelliği değiştirilmişse varsayılan değerine döndürür.
list-item : Html elementi liste elementi özelliği verilir.
table : Html elementine tablo (table) elementi özeliiği atanır.
table-row : Html elementine tablo satır(tr) elementi özeliiği atanır.
table-cell : Html elementine tablo sütun(td) elementi özeliiği atanır.
table-caption : Html elementine tablo kısa başlık(caption) elementi özeliiği atanır.
table-row-group : Html elementine tablo gövde(tbody) elementi özeliiği atanır.
table-header-group : Html elementine tablo başlık(thead) elementi özeliiği atanır.
table-footer-group : Html elementine tablo footer(tfoot) elementi özeliiği atanır.
table-column : Html elementine tablo içi sutün ortak özelliklerini atamak için kullanılır. (col element özelliği)
table-column-group : Html elementine tablo içi sutün ortak grup özelliklerini atamak için kullanılır. (colgroup element özelliği)
inline-table : Html elementi satır düzeyli tablo olarak kabul edilir.
flex : Html elementine blok düzeyli esnek element olma özelliği atar.
inline-flex : Html elementine satır düzeyli esnek element olma özelliği atar.
grid : Html elementine blok düzeyli ızgara element olma özelliği atar.
inline-grid : Html elementine satır düzeyli ızgara element olma özelliği atar.
initial : Html elementi varsayılan özelliğe döner.
Örnek 1 : inline, block, inline-block ve none değerleri için örneğimiz…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.zero, .first, .second,
.third, .fourth, .fifth, .sixth{
border: 1px solid red;
margin-bottom: 20px;
padding: 5px;
}
.zero div{
border: 1px solid grey;
width: 200px;
}
.first div {
display: inline;
border: 1px solid grey;
width: 200px;
}
.second div{
display: inline-block;
border: 1px solid grey;
width: 200px;
}
.third span {
border: 1px solid grey;
width: 200px;
}
.fourth span {
display: block;
border: 1px solid grey;
width: 200px;
}
.fifth span {
display: inline-block;
border: 1px solid grey;
width: 200px;
}
.sixth .two {
display: none;
}
</style>
</head>
<body>
<div class="zero">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="first">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="second">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="third">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
<div class="fourth">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
<div class="fifth">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
<div class="sixth">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
</body>
</html>
Html çıktısı:

Örneğimizde varsayılan değeri block olan div e ve varsayılan değeri inline olan span a değerleri denedik.
Örnek 2 : display list-item kullanımı
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.second div, .second span {
display: list-item;
}
</style>
</head>
<body>
<ul class="first">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<span class="three"> JS </span>
</ul>
<ul class="second">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<span class="three"> JS </span>
</ul>
</body>
</html>
Html çıktısı:

Bu örnekte div ve span ı liste elemanına çevirdik. first class ında liste özelliği gelmez iken second class ında list-item kullanarak liste özelliğini verdik.
Örnek 3 : display ile tablo yapmak. Çok tercih edilmese de örnek yapalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.first, .first th, .first td {border:1px solid gray; }
.second {display: table; border-collapse: separate;}
.second, .second div {border:1px solid gray; }
</style>
</head>
<body>
<table class="first">
<thead>
<tr>
<th>Adı</th>
<th>Soyadı</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mutlu</td>
<td>İnsan</td>
</tr>
<tr>
<td>Tasarım</td>
<td>Yazılım</td>
</tr>
</tbody>
</table>
<div class="second">
<div style="display: table-header-group;">
<div style="display: table-row;">
<div style="display: table-cell ;">Adı</div>
<div style="display: table-cell ;">Soyadı</div>
</div>
</div>
<div style="display: table-row-group;">
<div style="display: table-row;">
<div style="display: table-cell ;">Mutlu</div>
<div style="display: table-cell ;">İnsan</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell ;">Tasarım</div>
<div style="display: table-cell ;">Yazılım</div>
</tr>
</div>
</div>
</body>
</html>
Html çıktısı:

Örnekte first class ile html ile tablo örneği var. second class ı ile de css display özelliği ile tablo örneği yaptık.
css display flex kullanımı
Örnek 4: Bu örnek flex, grid kısa örnek vereceğiz. Daha sonraki bir yazımızda uzun olarak anlatacağız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.zero, .first, .second,
.third, .fourth, .fifth, .sixth{
border: 1px solid red;
margin-bottom: 20px;
padding: 5px;
}
.zero div{
border: 1px solid grey;
width: 200px;
}
.first div {
display: flex;
border: 1px solid grey;
width: 200px;
}
.second div{
display: inline-flex;
border: 1px solid grey;
width: 200px;
}
.third span {
border: 1px solid grey;
width: 200px;
}
.fourth span {
display: flex;
border: 1px solid grey;
width: 200px;
}
.fifth span {
display: inline-flex;
border: 1px solid grey;
width: 200px;
}
.sixth span {
display: block;
border: 1px solid grey;
width: 200px;
}
.sixth .two {
display: initial;
}
</style>
</head>
<body>
<div class="zero">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="first">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="second">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="third">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
<div class="fourth">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
<div class="fifth">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
<div class="sixth">
<span class="one"> HTML </span>
<span class="two"> CSS </span>
<span class="three"> JS </span>
</div>
</body>
</html>
Html çıktısı:

Arkadaşlar display özelliği block olan element tüm satırı kaplar. Eğer bir genişlik verirsek genişlik kadar yer kaplar satırda yanına başka bir eleman gelemez. Gelmesi için kaydırma veya ekstra bir işlem yapmalıyız. zero class ında görüldüğü gibi html, css ve js blokları yan yana gelmedi.
display flex blok düzeyli esnek kutu modeline dönüşürken inline-flex de ise hem blok hem de satır düzeyli esnek kutu modeline döner. Örnekte second ve third class larında görüldüğü gibi.
display özelliği satır olan elementler ise içeriği kadar yer kaplar ve sağında yer olduğu sürece yan yana gelirler. Yer kalmayınca alt satırdan aynı şekilde devam ederler. Örnekte class third de görüldüğü gibi.
display özelliği satır olan bir elementin ( span ) display özelliğine flex atarsak blok düzeyli esnek eleman gibi davranır. class fourth da olduğu gibi.
display özelliği satır olan bir elementin ( span ) display özelliğine inline-flex atarsak hem satır hem de blok düzeyli esnek eleman gibi davranır. class fifth de olduğu gibi.
span elementin display özelliğine block atarsak blok düzeyli eleman gibi davranır. class sixth de olduğu gibi.
Arkadaşlar flex ve grid yapısı çok uzun olduğu için bu yazımızda kısaca değindik. Bu konuları ayrıntılı ele alan yazılarımızı yazacağız.
Başka bir yazımızda görüşmek üzere…