CSS align-items özelliği

CSS align-items özelliği

Css align-content özelliği ile bir HTML elemanının içerisindeki alt elemanlarını hizalama ve konumlandırma işlemleri için kullanabiliriz

Örnek:

Align-itemsözelliğini kullanarak esnek kutu modülü ("flex") uygulanan bir kapsayıcı div içerisindeki elemanların konumlarına center değerini uygulayalım !

div { width: 220px; height: 350px; border: 2px solid black; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; }

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

Flex ile (esnek kutu modeli) ile yapılandırılmış bir div kutusundaki elemanları hizalamak için kullanılır.

CSS align-items	CSS align-items özellikleri
Varsayılan Değer:	stretch
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript css align-items:	object.style.alignItems="flex-start"

CSS align-items Tarayıcı Desteği

Aşağıdaki tablodaki sayılar bu özelliğin ilgili tarayıcılarda tamamen desteklendiği sürümleridir. Eğer sayıların yanında -webkit- ,-ms gibi ön takılar görüyorsanız tarayıcıların o versiyonlarında bu ön takı eklerini kullanmanız gerektiği anlamına gelir.

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

CSS align-items Değerleri

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

CSS align-items özelliği değerleri

CSS align-items değerleri	CSS align-items değerleri tanımları	CSS örnek uygulamalar
stretch	Varsayılan özelliğidir.Kapsaycı kutu içindeki elemanları tüm kutuyu kapsayacak şekilde esnetir.
center	Kapsayıcı kutu içindeki elemanları kutunun merkezinde / ortasında hizalar.
flex-start	Kapsayıcı div veya kutu içerisindeki html elemanlarını kutunun başlangıcında hizalar.
flex-end	Kapsayıcı div veya kutu içerisindeki html elemanlarını kutunun sonunda hizalamak için kullanılır.
baseline	Kutu içerisindeki elemanları kutunun başlangıcına göre konumlar.
initial	Özelliğin varsayılan değerine dönüştürür.
inherit	Eğer bir üst soy bağından aldığı özellik varsa o değeri aktarmasını sağlar.