Apakah Perbezaan Antara align-item dan align-content dalam Tata Letak Grid?

Jajar-Item lwn. Jajar-Kandungan dalam Susun atur Grid: Perbezaan Terperinci

Dalam Susun atur Grid, sejajarkan-item dan sejajarkan-kandungan sifat adalah penting untuk mencapai penjajaran item dan grid yang diingini dalam bekas. Walau bagaimanapun, peranan berbeza mereka boleh mengelirukan.

Penjelasan istilah:

• Bekas Grid: Elemen sekeliling yang mentakrifkan kawasan grid .
• Grid: Matriks garis menegak dan mendatar yang membahagikan bekas kepada kawasan.
• Item Grid: Blok kandungan yang terkandung dalam kawasan grid .

Jajar-Item lwn. Jajar-Kandungan:

-Item: Mengawal penjajaran item grid dalam grid individu mereka kawasan.
-Kandungan: Mengawal penjajaran grid secara keseluruhan dalam bekas.

Memahami Perbezaan:

The salah tanggapan timbul daripada idea bahawa justify-content dan align-content hanya terpakai apabila saiz grid lebih kecil daripada saiz bekas. Walau bagaimanapun, ini terpakai pada kedua-dua sifat -item dan -content.

Jika grid sesuai dengan sempurna dalam bekas, tiada ruang untuk bekas itu diagihkan untuk penjajaran. Dalam kes sedemikian, penjajaran -item dan -kandungan tidak akan memberi kesan.

Contoh Grafik:

Pertimbangkan bekas grid dibahagikan kepada tiga kawasan yang sama besar secara menegak. Item grid diletakkan di kawasan kedua dan ketiga. Grid dan bekas mempunyai saiz yang tidak sama.

Selaras-Item:

• selaras-item: tengah; Jajarkan item secara menegak dalam kawasan masing-masing.
• justify-item: tengah; Menjajarkan item secara mendatar dalam kawasannya.

Sejajar-Kandungan:

• justify-kandungan: tengah; Jarakkan grid secara mendatar dalam bekas.
• selaras-kandungan: tengah; Menjajarkan grid secara menegak dalam bekas.

Kesimpulan:

-Sifat item menjajarkan item dalam kawasan grid mengikut dimensi yang ditentukan bekas grid.
-Sifat kandungan menjajarkan grid secara keseluruhan dalam bekas, dengan mengambil kira sebarang ruang yang tersedia atau tidak terjual.

Atas ialah kandungan terperinci Apakah Perbezaan Antara align-item dan align-content dalam Tata Letak Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!