CSS justify-content Özelliği
CSS justify-content
Cssjustify-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 kutuyajustify-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 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;
Yorumlar
Yorum Gönder