CSS justify-content Özelliği

CSS justify-content

Css justify-content özelliğini esnek kutu modelinde kapsayıcı kutunun elemanlarının genişliği kabı doldurmadığında değişik hizalama seçenekleri sunar.

Örnek:

Bu örnekte bir esnek kutu içerisinde genişlikleri kabı doldurmayan elemanlar vardır.Kapsayici kutuya justify-contentözelliğinin space-between değeri verildiğindeki etkisini görmek için aşağıdaki kendiniz deneyin tuşuna tıklayınız.

#anakutu { width: 300px; height: 250px; border: 2px solid black; display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; } #anakutu div { width: 50px; height: 50px; }

CSS justify-content nedir nasıl kullanılır

Esnek kutu içerisindeki elemanlar yatay eksende tüm genişliği kaplamadığı zaman justify-content özelliği elemanları hizalamak için kullanılabilir.

CSS justify-content	CSS justify-content özellikleri
Varsayılan Değer:	flex-start
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript justify-content:	object.style.justifyContent="space-between"

CSS justify-content Tarayıcı Desteği

Tablodaki sayılar özelliği ilk destekleyen tarayıcı sürümünü göstermektedir.

CSS Kodu:
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS justify-content Değerleri

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

CSS justify-content özelliği değerleri

CSS justify-content değerleri	CSS justify-content değerleri tanımları	CSS örnek uygulamalar
flex-start	Varsayılan değer. Elemanlar kabın başında konumlandırılmıştır.
flex-end	Elemanlar kabın sonunda konumlandırılmıştır.
center	Elemanlar kabın ortasında konumlandırılmıştır.
space-between	Öğeler esnek kutunun başına ve sonuna yaslanır ama diğer elemanlar arasında eşit boşluklar vardır.
space-around	Öğeler esnek kutunun içersinde eşit aralıklarla konumlanır.
initial	Özelliğin varsayılan değeridir.
inherit	Üst soy bağından alacağı değerdir.