Barang tempat - Trik CSS

The place-itemsharta di CSS adalah singkatan bagi align-itemsdan justify-itemshartanah, menggabungkan mereka ke dalam satu deklarasi tunggal.

Penggunaan yang biasa dilakukan ialah memusatkan mendatar dan menegak dengan Grid:

.center-inside-of-me ( display: grid; place-items: center; )

Sifat-sifat ini telah digunakan dengan memperkenalkan tata letak Flexbox dan Grid, tetapi juga digunakan untuk:

• Kotak tingkat blok
• Kotak yang diposisikan sepenuhnya
• Kedudukan statik kotak yang betul-betul diposisikan
• Sel jadual

Sintaks

Harta ini menerima dua nilai, yang pertama untuk align-itemsdan yang kedua untuk justify-items. Sebagai penyegar, align-itemsmenyelaraskan kandungan di sepanjang paksi menegak (lajur) sedangkan justify-itemsselari di sepanjang paksi mendatar (baris).

.item ( display: grid; place-items: start center; )

Ini sama dengan menulis:

.item ( display: grid; align-items: start; justify-items: center; )

Sekiranya hanya diberikan satu nilai, maka ia menetapkan kedua-dua sifat. Contohnya, ini:

.item ( display: grid; place-items: start; )

... sama seperti menulis ini:

.item ( display: grid; align-items: start; justify-items: start; )

Nilai yang Diterima

Apa yang menjadikan harta tanah ini menarik adalah bahawa ia berkelakuan berbeza berdasarkan konteks yang digunakan. Sebagai contoh, beberapa nilai hanya berlaku untuk Flexbox dan tidak akan berfungsi dalam tetapan Grid. Selain itu, beberapa nilai berlaku untuk align-itemsharta tanah di mana yang lain berlaku di justify-itemssebelah.

Selanjutnya, nilai-nilai itu sendiri dapat dianggap jatuh ke dalam beberapa jenis penjajaran: kontekstual, pembahagian, posisi (yang menjadi posisi diri jika diterapkan secara langsung pada elemen anak dalam tata letak), dan garis dasar.

Rachel Andrew mempunyai lembaran cheat Box Alignment yang sangat baik yang membantu menggambarkan kesan nilainya.

Nilai	Jenis	Penerangan
auto	Kontekstual	Nilai disesuaikan dengan tepat berdasarkan konteks elemen. Ia menggunakan justify-itemsnilai elemen induk elemen tersebut. Sekiranya tidak wujud ibu bapa atau diterapkan pada elemen yang diposisikan absolute, maka nilainya menjadi normal.
normal	Kontekstual	Mengambil tingkah laku lalai dari konteks susun atur di mana ia digunakan. • Reka letak Block-tahap: start • Absolute-kedudukan: startuntuk unsur-unsur mutlak digantikan dan stretchuntuk semua orang lain susun atur Jadual •: Value diabaikan • Reka letak flexbox: Value diabaikan • Reka letak Grid: stretch, melainkan jika nisbah aspek atau saiz intrinsik digunakan di mana ia bertindak sukastart
stretch	Pembahagian	Mengembangkan elemen ke kedua-dua tepi bekas secara menegak align-itemsdan mendatar untuk justify-items.
start	Kedudukan	Semua elemen diselaraskan antara satu sama lain di tepi awal (kiri) bekas
end	Kedudukan	Semua elemen diselaraskan antara satu sama lain di hujung bekas (kanan) bekas
center	Kedudukan	Item diselaraskan di sebelah satu sama lain ke arah tengah bekas
left	Kedudukan	Item diselaraskan di sebelah satu sama lain ke arah kiri bekas. Sekiranya harta itu tidak selari dengan paksi atas, kanan, bawah, kiri standard, maka ia berkelakuan seperti end.
right	Kedudukan	Item diselaraskan di sebelah satu sama lain ke arah kanan bekas. Sekiranya harta itu tidak selari dengan paksi atas, kanan, bawah, kiri standard, maka ia berkelakuan seperti start.
flex-start	Kedudukan	Nilai flexbox only (yang jatuh kembali ke start) di mana item dikemas ke tepi permulaan bekas.
flex-end	Kedudukan	Nilai flexbox-only (yang jatuh kembali ke end) di mana item dikemas ke tepi hujung bekas.
self-start	Kedudukan Diri	Membolehkan item dalam susun atur menyelaraskan dirinya di tepi bekas berdasarkan sisi permulaannya sendiri. Pada dasarnya mengatasi apa yang ditetapkan nilai pada ibu bapa.
self-end	Kedudukan Diri	Membolehkan item dalam susun atur menyelaraskan dirinya di tepi bekas berdasarkan sisi hujungnya sendiri dan bukannya mewarisi nilai kedudukan bekas. Pada dasarnya mengatasi apa yang ditetapkan nilai pada ibu bapa.
first baseline last baseline	Garis asas	Menyelaraskan semua elemen dalam kumpulan (iaitu sel dalam satu baris) dengan memadankan garis dasar penjajarannya. Lalai firstsekiranya baselinedigunakan sendiri.

Sokongan Penyemak Imbas

Properti ini termasuk dalam spesifikasi CSS Box Alignment Model Level 3.

Sokongan penyemak imbas telah cukup luas dan hanya boleh digunakan:

• Edge 79+ (Transisi Pasca Chromium)
• Firefox 45+
• Chrome 59+
• Safari 11+

Rujukan

• Model Penjajaran Kotak CSS Tahap 3 - Spesifikasi rasmi di mana place-itemsharta tanah ditentukan pada mulanya.
• Rangkaian Pembangun Mozilla - Dokumentasi pasukan Mozilla.
• Lembar Cheat Box Alignment - Garis besar Rachel Andrew adalah sumber yang sangat berguna untuk memahami istilah penjajaran dan definisi mereka.