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:

• Bekas Grid: Bekas paling luar yang mewujudkan konteks pemformatan grid.
• Grid: Grid garisan menegak dan mendatar yang membahagikan bekas ke dalam kotak (kawasan grid) yang mengandungi grid item.
• Item Grid: Kotak diletakkan dalam aliran kandungan bekas grid.

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!