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)