Atribut place-content CSS

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;
}

Coba sendiri

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;
}

Coba sendiri

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