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 progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS justify-content Özelliği

CSS border-collapse Özelliği

CSS overflow Özelliği

CSS top Özelliği