CSS3 align-content özelliği

CSS align-content özelliği

Css align content özelliği niçin kullanılır ? Esnek kutu modelinde(flex) amaç, bir kapsayıcıya içindeki kutuların esnek bir şekilde yerleştirilmesidir. CSS align-content ,bir bakıma içeriği hizalama yöntemi de denilebilir.

Örnek:

Bu örnekte flex (esnek kutu modeli ile ) ile yapılandırılmış "kutuları" align-content özelliğinin center değeri kullanılarak kutular kapsayıcı kutunun merkezinde hizalanacak.



  div {
    width: 50px;
    height: 250px;
    border: 2px solid black;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
  }

CSS align-content nedir , nasıl kullanılır

CSS align-content CSS align-content özellikleri CSS align-content örnek uygulamalar
Varsayılan Değer: stretch  
Kalıtsallık: yok  
Animasyon özelliği: yok  
Versiyon: CSS3  
JavaScript align-content: object.style.alignContent="center"

CSS align-content Tarayıcı Desteği

CSS Kodu:
align-content 21.0 11.0 28.0 9.0
7.0 -webkit-
12.1

CSS align-content değerleri

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

CSS align-content ne işe yarar

CSS align-content değerleri CSS align-content değer tanımları CSS örnek uygulamalar
stretch Varsayılan değeridir.Bütün alanı kapsamaya çalışacak şekilde kutuları uzatır /esnetir.
flex-start Flex uygulanmış kutuları sayfanın başından itibaren sıralamaya çalışır.
flex-end Flex uygulanmış kutuları sayfanın başından itibaren sıralamaya çalışır.
space-between Flex uygulanmış kutuları bir kısmını sayfanın başına diğer kısmını ise sayfanın sonuna yaslar.
space-around space-between komutundan farkı sayfanın başı ile sonu arasında boşluk bırakmasıdır.
initial Elementin varsayılan özelliğidir.
inherit Bir üst ebeveyn(parent)'den aldığını değeri taşıdığını belirtir.

Yorumlar

Bu blogdaki popüler yayınlar

HTML Resimler

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

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

HTML5 Canvas Oyun Yapımı Dersleri

YouTube Reklam Engelleyici

Uyurken Bile Para Kazanmak İster misin

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

Linklerin Renklerini Değiştirme Örnek