Rumah > Artikel > hujung hadapan web > Jajar-item lwn. Jajarkan-kandungan: Bila dan Cara Menggunakannya dalam Reka Letak Grid?
Memahami Perbezaan antara align-item dan align-content dalam Grid Layout
Walaupun merujuk panduan komprehensif tentang Grid Layout, anda mungkin masih mempunyai soalan mengenai perbezaan antara sifat bekas "align-item" dan "align-content". Untuk menjelaskannya, mari kita pecahkan istilah:
Untuk menjajarkan item grid dalam sel, gunakan item-align dan justify-item, manakala justify-kandungan dan align-content selaraskan keseluruhan grid itu sendiri dalam bekas.
Sekarang, mari kita jelaskan salah tanggapan biasa:
Tuntutan: Sifat "-content" wujud kerana grid mungkin lebih kecil daripada bekasnya, membenarkan ruang untuk penjajaran.
Pembetulan: Kedua-dua sifat "-content" dan "-item" digunakan apabila saiz grid lebih kecil daripada bekas. Walau bagaimanapun, hanya sifat "-content" mempengaruhi penjajaran grid secara keseluruhan, menukar kedudukannya dalam bekas.
Sebagai contoh, dalam ilustrasi di bawah, grid lebih kecil daripada bekas, meninggalkan ruang untuk grid dipusatkan secara menegak dengan menggunakan align-content: center dan dijajarkan ke kanan dengan menggunakan justify-content: tamat.
[Imej susun atur grid dengan ruang di sekelilingnya]
Sebaliknya, jika saiz grid sepadan dengan bekas, tiada ruang untuk diagihkan dan align-content / justify-content tidak akan memberi kesan.
Ingat, selaraskan-item dan justify-item selaraskan item grid individu dalam kawasan grid mereka, manakala selaraskan-kandungan dan justify-kandungan menyelaraskan keseluruhan grid dalam bekas. Perbezaan ini penting apabila memanipulasi reka letak dan kedudukan reka bentuk berasaskan Grid anda.
Atas ialah kandungan terperinci Jajar-item lwn. Jajarkan-kandungan: Bila dan Cara Menggunakannya dalam Reka Letak Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!