align-self
Properti align-self merupakan bagian sub-property dari module Flexible Box.
Properti align-self menentukan perataan pada item yang dipilih secara individual di dalam wadah fleksibel (flexbox
container).
Properti ini dapat digunakan untuk mengesampingkan segala penyelarasan item kotak yang telah ditetapkan pada tingkat container menggunakan properti align-items.
Syntax
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
/* Default value*/
.flex-item {
align-self: auto;
}
Javascript Syntax
object.style.alignSelf="center"
default
align-self: auto;
align-items .align-self: flex-start;
Jika wadah tersebut memiliki align-items: center dan target miliki align-self:
flex-start , hanya target yang akan berada di awal sumbu silang.
Secara default, ini berarti akan diselaraskan secara vertikal di atas .
align-self: flex-end;
Jika wadah tersebut memiliki align-items: center dan target miliki align-self:
flex-end , hanya target yang akan berada di ujung sumbu silang.
Secara default, ini berarti akan diselaraskan secara vertikal di bawah.
align-self: center;
Jika wadah itu memiliki align-items: flex-start dan target miliki align-self:
center , hanya target yang akan berada di tengah sumbu silang.
Secara default, ini berarti berpusat vertikal .
align-self: baseline;
Jika wadah tersebut memiliki align-items: center dan target miliki align-self:
baseline , hanya target yang akan berada di garis dasar sumbu silang.
Secara default, ini berarti akan disejajarkan di sepanjang garis dasar teks.
align-self: stretch;
align-items: center dan target miliki align-self:
stretch , hanya target yang akan merentangkan sepanjang sumbu silang.See the Pen Contoh Property align-self by Codingku (@codingku) on CodePen.