Contoh
Posisi item fleksibel <div> elemen dengan ruang antara garis:
// Code for Safari 7.0+
document.getElementById("main").style.WebkitAlignContent = "space-between";
// Standard syntax
document.getElementById("main").style.alignContent
= "space-between"; Cobalah sendiri " Definisi dan Penggunaan
Properti alignContent sejalan item wadah yang fleksibel ketika item tidak menggunakan semua ruang yang tersedia di kayu salib sumbu (vertically) .
Tip: Gunakan properti justifyContent untuk menyelaraskan item pada main-axis (horizontally) .
Catatan: Harus ada beberapa baris item untuk properti ini memiliki efek apapun.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh Webkit menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| alignContent | 21.0 | 11.0 | 28.0 | 7.0 Webkit | 12.1 |
Catatan: Safari mendukung alternatif, properti WebkitAlignContent.
Sintaksis
Kembali properti alignContent:
object .style.alignContentMengatur properti alignContent:
object .style.alignContent="stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
Nilai properti
| Nilai | Deskripsi |
|---|---|
| stretch | nilai default. Produk yang ditarik agar sesuai wadah |
| center | Produk yang diposisikan di tengah wadah |
| flex-start | Produk yang diposisikan pada awal wadah |
| flex-end | Produk yang diposisikan pada akhir wadah |
| space-between | Produk yang diposisikan dengan ruang antara garis |
| space-around | Produk yang diposisikan dengan ruang sebelumnya, antara, dan setelah garis |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Rincian teknis
| Nilai default: | meregang |
|---|---|
| Kembali Nilai: | Sebuah String, yang mewakili properti menyelaraskan-isi dari sebuah elemen |
| CSS Versi | CSS3 |
Pages terkait
Referensi CSS: align-content property
HTML DOM STYLE Referensi: alignItems property
HTML DOM STYLE Referensi: alignSelf property
HTML DOM STYLE Referensi: justifyContent property
<Style Object