Membenarkan-item - Trik CSS

Anonim

Properti justify-itemsini adalah sub-harta tanah dari CSS Box Alignment Module yang pada dasarnya mengawal penjajaran item grid dalam ruang lingkupnya.

.element ( justify-items: center; )

justify-itemsmenyelaraskan item grid di sepanjang paksi baris (sebaris). Secara khusus, sifat ini membolehkan anda mengatur penjajaran untuk item di dalam bekas grid (bukan grid itu sendiri) pada kedudukan tertentu (misalnya start, centerdan end) atau dengan tingkah laku (misalnya autoatau stretch).

Apabila justify-itemsdigunakan, ia juga menetapkan nilai lalai justify-selfuntuk semua item grid, walaupun ini dapat diganti pada tingkat anak dengan menggunakan justify-selfproperti pada anak itu sendiri.

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

Sintaks

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Nilai awal: legacy
  • Berlaku untuk: semua elemen
  • Diwarisi: tidak
  • Nilai dikira: seperti yang dinyatakan
  • Jenis animasi: diskret

Nilai

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Nilai kata kunci asas

  • stretch: Nilai lalai. Menyelaraskan item untuk mengisi keseluruhan sel sel grid
  • auto: sama dengan nilai justify-itemspada ibu bapa.
  • normal: Walaupun kita justify-itemspaling sering digunakan dalam susun atur grid, secara teknikalnya untuk penjajaran kotak mana pun dan normalbermaksud perkara yang berbeza dalam konteks susun atur yang berbeza, termasuk:
    • susun atur tahap blok ( start)
    • susun atur grid stretch
    • kotak flex (tidak diendahkan)
    • sel jadual (tidak diendahkan)
    • susun atur yang betul-betul diletakkan ( start)
    • kotak yang betul-betul diletakkan ( stretch)
    • diganti kotak yang betul-betul diletakkan ( start)
.container ( justify-items: stretch; )

Nilai penjajaran asas

Ini menyelaraskan garis dasar penjajaran set garis dasar pertama atau terakhir kotak dengan garis dasar konteks penjajarannya yang sesuai.

.container ( justify-items: baseline; )
  • Penjajaran fallback untuk first baselineadalah safe start.
  • Penjajaran fallback untuk last baselineadalah safe end.
  • baselinesesuai dengan first baselineketika digunakan sendiri

Dalam demo di bawah (dilihat paling baik di Firefox), kita melihat bagaimana elemen sejajar dengan garis dasar grid berdasarkan paksi utama.

Nilai penjajaran kedudukan

  • start: Menyelaraskan item ke tepi awal bekas penjajaran
  • end: Menyelaraskan item dengan bekas penjajaran tepi hujung
  • center: Menyelaraskan item di tengah bekas penjajaran
  • left: Menyelaraskan item di sebelah kiri bekas penjajaran
  • right: Menyelaraskan item di sebelah kanan bekas penjajaran
  • self-start: Menyelaraskan item pada permulaan setiap sel item grid
  • self-end: Menyelaraskan item di hujung setiap sel item grid
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Nilai penjajaran limpahan

The limpahan harta menentukan bagaimana ia akan memaparkan kandungan grid apabila kandungan melebihi had sempadan grid ini. Oleh itu, apabila kandungannya lebih besar daripada wadah penjajaran, ia akan mengakibatkan limpahan yang mungkin menyebabkan kehilangan data. Untuk mengelakkan ini, kita dapat menggunakan safenilai yang memberitahu penyemak imbas untuk mengubah penjajaran agar tidak ada kehilangan data.

  • safe : Jika item melampaui wadah penjajaran, startmod digunakan.
  • unsafe : Nilai penjajaran disimpan sebagaimana adanya, tanpa mengira ukuran item atau bekas penjajaran.

Nilai warisan

  • legacy : Apabila digunakan dengan kata kunci arah (mis. right, leftAtau center), kata kunci tersebut diserahkan kepada keturunan untuk diwarisi. Tetapi jika keturunan menyatakan justify-self: auto;maka legacydiabaikan tetapi tetap menghormati kata kunci arah. Nilai tersebut dikira dengan nilai yang diwarisi jika tiada kata kunci arah yang diberikan. Jika tidak, ia dikira sebagai normal.

Demo

Maklumat lanjut

  • Modul Penjajaran Kotak CSS Tahap 3 (Draf kerja)
  • Panduan Lengkap untuk Grid
  • Panduan Lengkap untuk Flexbox

Sokongan penyemak imbas

Penyemak imbas menyokong justify-itemsmenjalankan gamut kerana ia digunakan dalam pelbagai konteks susun atur, seperti grid, flexbox, sel meja. Tetapi secara umum, jika grid dan flexbox disokong, maka anda dapat menganggapnya justify-itemsjuga.

Susun atur grid

IE Hujung Firefox Chrome Safari Opera
Tidak 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mudah Alih
81+ 45+ 81+ 10.1+ 59+
Sumber: caniuse

Susun atur lentur

IE Hujung Firefox Chrome Safari Opera
Tidak 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mudah Alih
87+ 83+ 81+ 9+ 12.1+
Sumber: caniuse

Harta yang berkaitan

Almanac pada 27 Okt 2019

barang selaras

Geoff Graham