Atribut place-content CSS
- Halaman sebelumnya perspective-origin
- Halaman berikutnya place-items
Definisi dan penggunaan
place-content
Atribut ini digunakan untuk tata letak kotak elasti (flexbox) dan grid, adalah singkatan dari berbagai atribut berikut:
Jika atribut place-content memiliki dua nilai:
place-content: start center;
- Nilai atribut align-content adalah 'start'
- Nilai atribut justify-content adalah 'center'
Jika atribut place-content hanya memiliki satu nilai:
place-content: end;
- Dengan demikian nilai atribut align-content dan justify-content adalah 'end'
Contoh
Contoh 1
Tentukan penyeimbang kerapatan di dasar wadah elasti dan memastikan jarak antar item elasti sejajar:
#container { display: flex; place-content: end space-between; }
Contoh 2: Bentuk Kertas Grid
Ruang ekstra di arah blok disebarkan seimbang di sekitar setiap proyek grid, dan proyek grid di arah baris menengah:
#container { display: grid; place-content: space-around center; }
Syarat CSS
place-content: normal|value|initial|inherit;
Nilai atribut
Nilai | Deskripsi |
---|---|
normal |
Nilai Default. Tergantung konteks layout. Sama dengan tidak menetapkan nilai atribut align-content dan justify-content. |
stretch |
Grid: Jika belum diset ukuran, proyek grid akan menyesuaikan diri untuk memenuhi kontainer grid. Box elastis: Jika proyek elastis belum diset ukuran di sumbu transversal, maka akan menyesuaikan diri di sumbu transversal untuk memenuhi kontainer elastis. |
start | Menjajaran proyek ke posisi awal kontainer. |
end | Menjajaran proyek ke posisi akhir kontainer. |
center | Menjajaran proyek ke posisi tengah kontainer. |
space-between | Menyebarluaskan ruang yang tersedia di dua sumbu kontainer, sehingga jarak antara proyek sama. |
space-around | Menyebarluaskan ruang yang tersedia di dua sumbu kontainer, sehingga jarak disekitar setiap proyek sama. |
space-evenly | Menyebarluaskan proyek di dua sumbu kontainer. |
overflow-alignment |
'safe':Jika konten meluas, atur penjajaran proyek menjadi 'start'. 'unsafe':Tetap mempertahankan nilai penjajaran tanpa mengubah, terlepas dari apakah konten proyek meluas atau tidak. |
initial | Setel atribut ini ke nilai default. Lihat initial。 |
inherit | Mengambil atribut ini dari elemen induknya. Lihat inherit。 |
Detil Teknis
Nilai Default: | normal |
---|---|
Inheritance: | Tidak |
Pembuatan animasi: | Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi。 |
Versi: | CSS3 |
语法 JavaScript: | object.style.placeContent="end space-around" |
Dukungan Browser
Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
59.0 | 79.0 | 53.0 | 11.0 | 46.0 |
Halaman yang berhubungan
Panduan:CSS Bentuk Kertas Grid
Panduan:CSS Bentuk Kertas Elastis
Referensi:Atribut align-content CSS
Referensi:Atribut justify-content CSS
Referensi:Atribut alignContent HTML DOM
- Halaman sebelumnya perspective-origin
- Halaman berikutnya place-items