Atribut align-content CSS

Definisi dan Penggunaan

align-content Perubahan Atribut Atribut flex-wrap Perilaku atribut. align-items Seperti yang lainnya, tetapi ia tidak menjajaran item elastic, melainkan menjajaran garis elastic.

Perhatian:Harus ada beberapa baris item, atribut ini baru akan berfungsi!

Petunjuk:Gunakan justify-content Atribut dapat mengatur penjajaran item di sumbu utama (main-axis) secara horisontal.

Lihat Juga:

Panduan CSS:Flexbox CSS

Panduan CSS:CSS Grid

Panduan CSS:Atribut align-items

Panduan CSS:Atribut align-self

Panduan CSS:Atribut justify-content

Panduan HTML DOM:Atribut alignContent

Contoh

Menempatkan baris ke tengah kontainer elastic:

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 Atribut

Nilai Deskripsi
stretch Nilai Default. Baris dipegang untuk mengisi ruang sisanya.
center Mempakai baris menuju tengah kontainer elastic.
flex-start Mempakai baris menuju awal kontainer elastic.
flex-end Mempakai baris menuju akhir kontainer elastic.
space-between Baris diatur secara rata di dalam kontainer elastic.
space-around Baris diatur secara rata di dalam kontainer elastic, setiap ujung mengambil setengahnya.
initial Atur atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen orangtua. Lihat inherit.

Detil Teknologi

Nilai Default: stretch
Inheritance: Tidak
Pembuatan Animate: Tidak didukung. Lihat:Atribut-atribut Animate.
Versi: CSS3
Sintaks JavaScript: object.style.alignContent="center"

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

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