CSS ILE BLOK ELEMANLARI YANYANA SIRALAMA

Merhaba..

 

Html'de kullanılan blok elemanlar (div,p,hx vs), bulundukları satır hizasını komple kapladıkları için , yanyana gelemezler. Ancak CSS ile bir kaç farklı yol kullanılarak blok elemanların satır içi elemanlara dönüştürülmesiyle , bu mümkün olmaktadır..

 

 

 

 

 

 

BLOK ELEMANLARIN VARSAYILAN YERLEŞİMİ

 

Yukarıda bahsettiğim gibi , blok elemanlar bulundukları tüm satırı kaplarlar. DIV , P , HX gibi elemanlara semenatik etiketler'de DIV yapısında olduğu için bu davranışı göstereceklerdir.  Örneğin 3 div içeren bir örnek görelim..

 

HTML

<div> DIV 1 </div>
<div> DIV 2 </div>
<div> DIV 3 </div>

 

CSS

div {
   width:100px;
   height:40px;
   background-color:orange;
   color:#fff;
   padding:1rem;
   margin:1rem;
}

 

EKRAN

 

 

DIV'ler blok elemanlar olduğu için , genişlikleri azda olsa , yanına başka bir eleman gelmesine izin vermezler.. Bunu değiştirmek  için DIV'lere  farklı özellikler eklememiz gerekir..

 

 

 

 

 

DISPLAY İLE YANYANA SIRALAMA

 

Display özelliğinin "inline" yada "inline-block" değerleriyle, blok elemöanlar satır içi elemanlara dönüşür ve böylece tek satırda yanyana durabilirler. Bunun için DIV'lere display özelliği eklenir..

 

div {
   display:inline;
   display:inline-block;
}

 

EKRAN

 

 

• Display inline özelliğinde elemanlar tamamen satır içi elemanlara dönüştükleri için , genişlik ve alt üst margin değerleri geçersiz olur. 
• Display inline-block özelliğinde ise elemanlar satır içi elemanlara dönüşürlerken iaynı zamanda blok özelliklerini korurlar ve dolayısı ile  , genişlik ve alt üst margin değerleri alabilirler..

 

 

 

 

 

FLOAT İLE YANYANA SIRALAMA

 

Css float özelliği ile elemanların , varsayılan yerleşimleri değiştirilibilir. Sayfaların normal akışında, blok elemanlar yukarıdan aşağı doğru yerleşirler. Ancak float ile verilen LEFT yada RIGHT değerleri ile , yerleşimler soldan sağa yada soldan sağa şeklinde değiştirilebilir..

 

CSS

div { float:left; }
div { float:right; }

 

EKRAN

 

 

• Float : left ile elemanlar soldan sağa doğru yerleşirler.. 
• Float : right ile elemanlar sağdan sola doğru yerleşirler.. 

 

 

 

 

 

FLEX İLE YANYANA SIRALAMA

 

Flex box yapısında , kapsayıcı içerisindeki elemanlar, flex yönüne bağlı olarak yanyana sıralanabilirler. Bu yapıda varsayılan yerleşim yönü yataydır (satır) . Dolayısı ile FLEX yapı uygulanmış kapsayıcı içindeki elemanlar , yanyana sıralanırlar.

 

Blok elemanları flex yapı ile yanyana sıralamak için , elemanları mutlaka bir kapsayıcı içine almak durumundayız..

 

CSS

.container { display:flex }

 

HTML

<div class="container"> <!-- KAPSAYICI DIV -->
    <div> DIV 1 </div>
    <div> DIV 2 </div>
    <div> DIV 3 </div>
</div>

 

EKRAN

 

 

 

 

 

 

GRID İLE YANYANA SIRALAMA

 

GRID yapısındada , tıpkı flex yapısında olduğu gibi kapsayıcıya verilen özelliklerle blok elamanlar yanyana sıralanbilirler.. Bunun için kapsayıcıya verilen GRID özelliğinin yanı sıra , yerleşimin yanyana olması için , sütun genişliklerine (grid-template-columns) değer eklenemesi gerekir. 

 

Blok elemanları GRID yapı ile yanyana sıralamak için , elemanları  yine mutlaka bir kapsayıcı içine almak durumundayız..

 

CSS

.container { 
   display:grid 
   grid-template-columns: 100px  100px 100px;
   gap:1rem;
}

 

HTML

<div class="container"> <!-- KAPSAYICI DIV -->
    <div> DIV 1 </div>
    <div> DIV 2 </div>
    <div> DIV 3 </div>
</div>

 

EKRAN

 

 

FLEX ve GRID yapıları , her ne kadar DISPLAY özelliği ile uygulanıyor olsa da , başlı başına birer yapı oldukları için ayrı yöntemler olarak ele aldım..

 

 

 

Görüşmek üzere..