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 |