The place-items
properti di CSS adalah istilah untuk align-items
dan justify-items
properti, menggabungkan mereka ke dalam deklarasi tunggal.
Penggunaan umum adalah melakukan pemusatan horizontal dan vertikal dengan Grid:
.center-inside-of-me ( display: grid; place-items: center; )
Properti ini telah digunakan dengan diperkenalkannya tata letak Flexbox dan Grid, tetapi juga diterapkan ke:
- Kotak tingkat blok
- Kotak dengan posisi benar
- Posisi statis kotak yang benar-benar diposisikan
- Sel tabel
Sintaksis
Properti menerima nilai ganda, yang pertama untuk align-items
dan yang kedua untuk justify-items
. Sebagai penyegar, align-items
meratakan konten di sepanjang sumbu vertikal (kolom) sedangkan di justify-items
sepanjang sumbu horizontal (baris).
.item ( display: grid; place-items: start center; )
Ini sama dengan menulis:
.item ( display: grid; align-items: start; justify-items: center; )
Jika hanya satu nilai yang diberikan, maka ini menyetel kedua properti. Misalnya, ini:
.item ( display: grid; place-items: start; )
… Sama dengan menulis ini:
.item ( display: grid; align-items: start; justify-items: start; )
Nilai yang Diterima
Yang membuat properti ini menarik adalah perilakunya berbeda berdasarkan konteks penggunaannya. Misalnya, beberapa nilai hanya berlaku untuk Flexbox dan tidak akan berfungsi dalam pengaturan Grid. Selain itu, beberapa nilai berlaku untuk align-items
properti di mana nilai lain diterapkan ke justify-items
samping.
Selanjutnya, nilai itu sendiri dapat dianggap termasuk dalam beberapa jenis penyelarasan: kontekstual, distribusi, posisional (yang menjadi posisional sendiri jika diterapkan secara langsung ke elemen anak dalam tata letak), dan garis dasar.
Rachel Andrew memiliki lembar contekan Box Alignment yang sangat bagus yang membantu mengilustrasikan efek nilai.
Nilai | Tipe | Deskripsi |
---|---|---|
auto | Kontekstual | Nilainya menyesuaikan berdasarkan konteks elemen. Ini menggunakan justify-items nilai elemen induk dari elemen tersebut. Jika tidak ada induk atau diterapkan ke elemen yang diposisikan dengan absolute , maka nilainya menjadi normal . |
normal | Kontekstual | Mengambil perilaku default dari konteks tata letak tempat diterapkan. • Tata letak tingkat blok: start • Penentuan posisi start absolut : untuk elemen absolut yang diganti dan stretch untuk yang lainnya• Tata letak tabel: Nilai diabaikan • Tata letak Flexbox: Nilai diabaikan • Tata letak kisi :, stretch kecuali rasio aspek atau ukuran intrinsik digunakan saat perilakunya Sukastart |
stretch | Distribusi | Memperluas elemen ke kedua tepi wadah secara vertikal untuk align-items dan untuk horizontal justify-items . |
start | Posisi | Semua elemen disejajarkan satu sama lain di tepi awal (kiri) wadah |
end | Posisi | Semua elemen disejajarkan satu sama lain di tepi akhir (kanan) wadah |
center | Posisi | Item disejajarkan di samping satu sama lain ke arah tengah wadah |
left | Posisi | Item disejajarkan di samping satu sama lain menuju sisi kiri wadah. Jika properti tidak sejajar dengan sumbu standar atas, kanan, bawah, kiri, maka berperilaku seperti itu end . |
right | Posisi | Item disejajarkan di samping satu sama lain menuju sisi kanan wadah. Jika properti tidak sejajar dengan sumbu standar atas, kanan, bawah, kiri, maka berperilaku seperti itu start . |
flex-start | Posisi | Nilai khusus flexbox (yang kembali ke start ) tempat item dikemas ke tepi awal penampung. |
flex-end | Posisi | Nilai khusus flexbox (yang kembali ke end ) tempat item dikemas ke tepi akhir penampung. |
self-start | Posisi Diri | Mengizinkan item dalam tata letak untuk menyelaraskan dirinya di tepi penampung berdasarkan sisi awalnya sendiri. Pada dasarnya mengganti nilai yang ditetapkan pada induk. |
self-end | Posisi Diri | Mengizinkan item dalam tata letak untuk menyelaraskan dirinya di tepi penampung berdasarkan sisi akhirnya sendiri, bukan mewarisi nilai posisi penampung. Pada dasarnya mengganti nilai yang ditetapkan pada induk. |
first baseline last baseline | Dasar | Meratakan semua elemen dalam grup (yaitu sel dalam baris) dengan mencocokkan baseline perataannya. Secara default first jika baseline digunakan sendiri. |
Dukungan Browser
Properti ini termasuk dalam spesifikasi CSS Box Alignment Model Level 3.
Dukungan browser menjadi cukup luas dan sebagian besar hanya dapat digunakan:
- Edge 79+ (Transisi Pasca Chromium)
- Firefox 45+
- Chrome 59+
- Safari 11+
Referensi
- CSS Box Alignment Model Level 3 - Spesifikasi resmi tempat
place-items
properti awalnya ditentukan. - Jaringan Pengembang Mozilla - Dokumentasi tim Mozilla.
- Box Alignment Cheat Sheet - Garis besar Rachel Andrew adalah sumber yang sangat berguna untuk memahami istilah keselarasan dan definisinya.