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.  

Yorumlar

Popüler yayınlar

CSS content Özelliği

Javascript ile neler yapılabilir

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

CSS top Özelliği

CSS flex-basis Özelliği

HTML Yorumlar

CSS align-self özelliği

HTML5 Canvas Oyun Yapımı Dersleri