Codingku change

#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;

Target harus menggunakan nilai 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: center 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;

Jika wadah tersebut memiliki 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.