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

Bu blogdaki popüler yayınlar

HTML Resimler

HTML yorum etiketi ile öğe gizleme örneği

YouTube Reklam Engelleyici

HTML5 Canvas Oyun Yapımı Dersleri

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Linklerin Renklerini Değiştirme Örnek

Uyurken Bile Para Kazanmak İster misin

javascript ile aciklama satiri ve haftanın gunünü bulma