Membenarkan-item - Trik CSS

Anonim

The justify-itemsproperti adalah sub-properti dari CSS Box Keselarasan Modul yang pada dasarnya mengontrol keselarasan item jaringan dalam lingkup mereka.

.element ( justify-items: center; )

justify-itemsmeratakan item petak di sepanjang sumbu baris (sebaris). Secara khusus, properti ini memungkinkan Anda menyetel perataan untuk item di dalam wadah kisi (bukan kisi itu sendiri) dalam posisi tertentu (misalnya start, centerdan end) atau dengan perilaku (misalnya autoatau stretch).

Saat justify-itemsdigunakan, ini juga menyetel nilai default justify-selfuntuk semua item petak, meskipun ini bisa diganti di tingkat anak dengan menggunakan justify-selfproperti pada anak itu sendiri.

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

Sintaksis

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Nilai awal: legacy
  • Berlaku untuk: semua elemen
  • Diwariskan: tidak
  • Nilai yang dihitung: seperti yang ditentukan
  • Jenis animasi: diskrit

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 dasar

  • stretch: Nilai default. Meratakan item untuk mengisi seluruh lebar sel item kisi
  • auto: sama dengan nilai justify-itemsin parent.
  • normal: Meskipun kami melihat justify-itemspaling sering digunakan dalam tata letak petak, secara teknis ini adalah untuk perataan kotak apa pun dan memiliki normalarti yang berbeda dalam konteks tata letak yang berbeda, termasuk:
    • tata letak tingkat blok ( start)
    • tata letak grid stretch
    • flexbox (diabaikan)
    • sel tabel (diabaikan)
    • layout benar-benar diposisikan ( start)
    • kotak dengan posisi mutlak ( stretch)
    • mengganti kotak dengan posisi mutlak ( start)
.container ( justify-items: stretch; )

Nilai perataan dasar

Ini meratakan garis dasar perataan dari kumpulan garis dasar pertama atau terakhir kotak dengan garis dasar terkait dari konteks penyelarasannya.

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

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

Nilai perataan posisi

  • start: Menyejajarkan item ke tepi awal wadah penyelarasan
  • end: Sejajarkan item dengan wadah pelurusan tepi ujung
  • center: Meratakan item di tengah wadah pelurusan
  • left: Meratakan item di kiri wadah perataan
  • right: Meratakan item di kanan wadah pelurusan
  • self-start: Meratakan item di awal setiap sel item kisi
  • self-end: Meratakan item di akhir setiap sel item kisi
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Nilai perataan luapan

The meluap properti menentukan bagaimana ia akan menampilkan isi dari grid bila konten melebihi batas batas grid. Jadi bila konten lebih besar dari wadah penyelarasan, itu akan mengakibatkan luapan yang dapat menyebabkan hilangnya data. Untuk mencegah hal ini, kita dapat menggunakan safenilai yang memberi tahu browser untuk mengubah perataan sehingga tidak ada kehilangan data.

  • safe : Jika item meluap penampung penyelarasan, startmode digunakan.
  • unsafe : Nilai keselarasan disimpan apa adanya, terlepas dari ukuran item atau wadah penyelarasan.

Nilai warisan

  • legacy : Saat digunakan dengan kata kunci arah (mis. right, leftAtau center), kata kunci tersebut diteruskan ke turunan untuk diwariskan. Tetapi jika turunan mendeklarasikan justify-self: auto;maka legacydiabaikan tetapi tetap menghormati kata kunci arah. Nilai tersebut dihitung ke nilai yang diwariskan jika tidak ada kata kunci arah yang diberikan. Jika tidak, itu dihitung menjadi normal.

Demo

Informasi lebih lanjut

  • Modul Penyelarasan Kotak CSS Level 3 (Draf kerja)
  • Panduan Lengkap untuk Grid
  • Panduan Lengkap untuk Flexbox

Dukungan browser

justify-itemsJenis dukungan browser menjalankan keseluruhan karena digunakan dalam berbagai konteks tata letak, seperti kisi, kotak fleksibel, sel tabel. Tetapi secara umum, jika grid dan flexbox didukung, maka Anda juga dapat berasumsi justify-itemsdemikian.

Tata letak kisi

YAITU Tepi Firefox Chrome Safari Opera
Tidak 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Sumber: caniuse

Tata letak fleksibel

YAITU Tepi Firefox Chrome Safari Opera
Tidak 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Sumber: caniuse

Properti terkait

Almanac pada 27 Oktober 2019

menyelaraskan-item

Geoff Graham