Atribut align-content CSS

Definisi dan penggunaan

Properti align-content Perubahan properti Properti flex-wrap Perilaku properti. align-items Sama seperti, tetapi ia tidak menarik item elasthan, melainkan garis elasthan.

Perhatian:Harus ada baris item yang berbeda untuk mengaktifkan properti ini!

Petunjuk:Gunakan justify-content Properti ini dapat menarik item horisontal di sumbu utama (main-axis).

Lihat juga:

Panduan CSS:Flexbox CSS

Panduan CSS:CSS Grid

Panduan CSS:Properti alignItems

Panduan CSS:Properti alignSelf

Panduan CSS:Properti justifyContent

Panduan HTML DOM:Properti alignContent

Contoh

Pakai baris ke tengah kontainer elasthan:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Coba sendiri

Sintaks CSS

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Nilai properti

Nilai Deskripsi
stretch Nilai baku. Baris dipegang untuk mengisi ruang sisa.
center Pakai baris ke tengah kontainer elasthan.
flex-start Pakai baris ke ujung awal kontainer elasthan.
flex-end Pakai baris ke ujung akhir kontainer elasthan.
space-between Baris disusun secara rata di dalam kontainer elasthan.
space-around Baris disusun secara rata di dalam kontainer elasthan, setiap ujung mengambil setengahnya.
initial Atur properti ini ke nilai baku. Lihat initial.
inherit Mengambil properti ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai baku: stretch
Warisan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti berhubungan dengan animasi.
Versi: CSS3
Sintaks JavaScript: object.style.alignContent="center"

Dukungan browser

Angka di dalam tabel menunjukkan versi browser pertama yang mendukung sifat ini sepenuhnya.

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