Contoh
Membuat beberapa ruang di sekitar item fleksibel <div> elemen:
div
{
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti membenarkan-konten sejalan item wadah fleksibel ketika item tidak menggunakan semua ruang yang tersedia pada main-axis (horizontally) .
Tip: Gunakan menyelaraskan-item properti untuk menyelaraskan item pada salib-sumbu (vertically) .
nilai default: | flex-start |
---|---|
mewarisi: | no |
animatable: | no. Read about animatable |
Versi: | CSS3 |
sintaks JavaScript: | object .style.justifyContent="space-between" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau moz menentukan versi pertama yang bekerja dengan awalan.
Milik | |||||
---|---|---|---|---|---|
justify-content | 29,0 21.0 -webkit- | 11.0 | 28.0 18,0 moz | 9.0 6.1 -webkit- | 17.0 |
CSS Syntax
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
Nilai properti
Nilai | Deskripsi | Mainkan |
---|---|---|
flex-start | nilai default. Produk yang diposisikan pada awal wadah | Mainkan " |
flex-end | Produk yang diposisikan pada akhir wadah | Mainkan " |
center | Produk yang diposisikan di tengah wadah | Mainkan " |
space-between | Produk yang diposisikan dengan ruang antara garis | Mainkan " |
space-around | Produk yang diposisikan dengan ruang sebelumnya, antara, dan setelah garis | Mainkan " |
initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Pages terkait
CSS Referensi: align-content property
CSS Referensi: align-items property
CSS Referensi: align-self property
Referensi HTML DOM: justifyContent property