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

HTML Metin Biçimlendirme Etiketleri

HTML em Etiketi

HTML hr Etiketi

CSS justify-content Özelliği

HTML table Etiketi

CSS align-items özelliği

HTML pre Etiketi

CSS flex-basis Özelliği

HTML menu Etiketi

CSS content Özelliği