align-self:

Obje içindeki seçilen nesnenin uyumunu (konumunu) belirler.

Örnek:

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    flex: 1;
}

#mavi {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}

 

See the Pen GpYOoY by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

Değer	Açıklama	Örnek
auto	Öğe ana objeye sığacak kadar uzatılır.
stretch	Öğe ana objeye sığacak kadar uzatılır.
center	Öğe ana objenin merkezine konumlandırılır.
flex-start	Öğe ana objenin başında konumlandırılır.
flex-end	Öğe ana objenin sonunda konumlandırılır.
baseline	Öğe ana objenin başında konumlandırılır.	.
inital	Varsayılan değerine bu özelliğini ayarlar.
inherit	Bir üst elementinin değerini alır.(Kalıtsallık)

Tarayıcı Desteği

 

21.0 -webkit	28.0	11.0	7.0 -webkit	12.10