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

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

CSS top Özelliği

HTML strong Etiketi

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

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

CSS flex-basis Özelliği

HTML5 Canvas Oyun Yapımı Dersleri