Atribut align-items CSS

Definisi dan penggunaan

align-items Sifat untuk menentukan cara penarikan lalai untuk item di dalam container elasti.

Petikan:Guna sifat setiap item align-self sifat untuk menindih sifat ini align-items.

Lihat juga:

Panduan CSS:CSS Grid

Panduan CSS:Flexbox CSS

Panduan CSS:Sifat alignContent

Panduan CSS:Sifat alignSelf

Panduan CSS:Sifat justifyContent

Panduan CSS:Sifat justifyItems

Panduan CSS:Sifat justifySelf

Panduan HTML DOM:Sifat alignItems

Contoh

Menarik ke tengah semua item <div> elemen elasti:

div {
  display: flex;
  align-items: center;
}

Cuba sendiri

Tatabahasa CSS

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Nilai sifat

Nilai Penerangan
stretch Lalai. Objek dipegang untuk memadankan container.
center Objek berada di tengah container.
flex-start Objek berada di permulaan container.
flex-end Objek berada di ujung container.
baseline Objek ditempatkan di garis asas container.
initial Tetapkan sifat ini kepada nilai lalai. Lihat: initial.
inherit Mewarisi sifat ini daripada elemen bapa. Lihat: inherit.

Butir teknologi

Nilai lalai: stretch
Warisan: Tidak
Pembuatan animasi: Tidak disokong. Lihat:Sifat bergerak.
Versi: CSS3
Tatabahasa JavaScript: object.style.alignItems="center"

Dukungan pereka

Nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong sifat ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0