#align-items
Properti align-items merupakan bagian sub-property dari module Flexible Box.
Property align-items terkait dengan layout CSS yang mempengaruhi bagaimana elemen-elemen disejajarkan dalam tata letak Flexbox dan Grid.
Property ini menentukan nilai align-self langsung pada semua elemen item kotak sebagai grup.
Elemen-elemen item kotak ini disejajarkan mirip dengan justify-content tetapi letaknya di sepanjang sumbu silang (arahnya tegak lurus terhadap sumbu utama).
Di flexbox, align-items mengontrol perataan item pada palang sumbu. Sedangkan di layout Grid, ia mengontrol perataan
item pada sumbu blok didalam area grid.
Catatan: Gunakan property
align-selfpada masing-masing item kotak untuk menimpa propertyalign-self.
Syntax
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
/* Default value */
.flex-container {
align-items: stretch;
}
Javascript Syntax
object.style.alignItems="center"
align-items: flex-start;
Item flexbox disejajarkan di awal dari sumbu silang .
Secara default, sumbu silang adalah vertikal. Ini berarti item-item flexbox akan sejajar secara vertikal di bagian atas .
align-items: flex-end;
Item flexbox disejajarkan di akhir dari sumbu silang .
Secara default, sumbu silang adalah vertikal. Ini berarti item-item flexbox akan sejajar secara vertikal di bagian bawah .
align-items: center;
Item flexbox disejajarkan di tengah dari sumbu silang .
Secara default, sumbu silang adalah vertikal. Ini berarti item flexbox akan berada di tengah vertikal .
align-items: baseline;
Item flexbox disejajarkan di garis dasar dari sumbu silang .
Secara default, sumbu silang adalah vertikal. Ini berarti item-item flexbox akan menyesuaikan diri sesuai garis dasar dari teks yang sejajar di sepanjang garis horizontal.
default
align-items: stretch;
Item flexbox akan merentangkan seluruh sumbu silang .
Secara default, sumbu silang adalah vertikal. Ini berarti item-item flexbox akan mengisi seluruh ruang vertikal.
See the Pen Contoh Property align-items by Codingku (@codingku) on CodePen.