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
NORMAL YERLEŞİM
DIV 1
DIV 2
DIV 3
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;
DIV 1
DIV 2
DIV 3
display:inline-block;
DIV 1
DIV 2
DIV 3
- 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
DIV 1
DIV 2
DIV 3
float:right
DIV 1
DIV 2
DIV 3
- 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
display:flex (.container)
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..