Tempat-item - Trik CSS

Anonim

The place-itemsproperti di CSS adalah istilah untuk align-itemsdan justify-itemsproperti, 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-itemsdan yang kedua untuk justify-items. Sebagai penyegar, align-itemsmeratakan konten di sepanjang sumbu vertikal (kolom) sedangkan di justify-itemssepanjang 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-itemsproperti di mana nilai lain diterapkan ke justify-itemssamping.

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-itemsnilai 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 startabsolut : untuk elemen absolut yang diganti dan stretchuntuk yang lainnya
• Tata letak tabel: Nilai diabaikan
• Tata letak Flexbox: Nilai diabaikan
• Tata letak kisi :, stretchkecuali rasio aspek atau ukuran intrinsik digunakan saat perilakunya Sukastart
stretch Distribusi Memperluas elemen ke kedua tepi wadah secara vertikal untuk align-itemsdan 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 firstjika baselinedigunakan 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-itemsproperti 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.