CSS align-self özelliği

CSS align-self özelliği

Css align-self özelliği ile bir esnek kutu içerisindeki seçtiğimiz elamanı istenilen değere göre hizalayabiliriz..

Örnek:

Bu örneğimizde flex özelliği taşıyan kutu içindeki id'si"kırmızı" olan elemanı align-self özelliğinin center değeri ile merkezde hizalanacaktır.

#kirmizi { -webkit-align-self: center; align-self: center; }

CSS align-self nedir nasıl kullanılır

flex kutu modeli ile çalışılırken kapsayıcı bir elemanın içindeki elemanlardan seçilenleri hizalamak için kullanılır.
CSS align-self CSS align-self özellikleri  
Varsayılan Değer: auto  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript align-self: object.style.alignSelf="stretch"

CSS align-self Tarayıcı Desteği

CSS Kodu:
align-self 21.0 11.0 20.0 9.0
7.0 -webkit-
12.1

CSS align-self Değerleri

align-self: align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

CSS align-self özelliği değerleri

CSS align-self değerleri CSS align-self değerleri tanımları CSS örnek uygulamalar
auto Varsayılan özelliğidir.Eğer bir üst soydan aldığı değer var ise o özelliği taşır.
stretch Seçilen elemanı kutuyu kapsayacak şekilde esnetir.
center Seçilen html elemanını kapsayıcısının merkezinde hizalar.>
flex-start Seçilen elemanı baştan itibaren hizalar.
flex-end Seçilen elemanı kapsayıcısının sonuna hizalar.
baseline Seçilen elemanı kutunun ana başlangıc hattına göre hizalar.
initial bu Özelliğin başlangıç /varsayılan özelliğine dönüştürür ve ona göre hizalama işlemini gerçekleştirir.
inherit bir üst soybağından aldığı özelliğe göre hizalar.(eğer var ise)

Yorumlar

Bu blogdaki popüler yayınlar

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

HTML Resimler

Html5 canvas animasyon dersleri Javascript Yilan Oyunu

Javascript ile neler yapılabilir

HTML blockquote Etiketi Örnek

YouTube Reklam Engelleyici

Linklerin Renklerini Değiştirme Örnek