Bagaimanakah `align-item` dan `align-content` Berbeza dalam Reka Letak Grid CSS?

Memahami Perbezaan Antara Align-Items and Align-Content in CSS Grid Layout

Dalam panduan komprehensif untuk Grid Layout, konsep "justify/align-item sifat " dan "justify/align-content" diperkenalkan. Walaupun pengarang mencadangkan bahawa sifat "-kandungan" digunakan apabila saiz grid lebih kecil daripada bekasnya, konsep ini digunakan untuk kedua-dua set sifat.

Mentakrifkan Komponen Sistem Grid

• Bekas Grid: Elemen induk yang melampirkan grid dan itemnya, mewujudkan konteks pemformatan.
• Grid: Grid garis bersilang yang membentuk kawasan untuk item grid untuk diduduki.
• Item Grid: Elemen diletakkan dalam kawasan grid.

Penjajaran Grid dan Item Grid

The sifat justify-content dan align-content mengawal penjajaran grid dalam bekasnya, manakala justify-self, justify-item, align-self dan align-item mengawal penjajaran item grid individu.

Menggambarkan Konsep

Pertimbangkan grid yang lebih kecil daripada bekasnya, seperti yang ditunjukkan di bawah:

[Imej reka letak grid dengan ruang tambahan dalam bekas]

Dalam senario ini, sifat justify-content dan align-content boleh digunakan untuk mengagihkan ruang tambahan. Contohnya, justify-content: end align right-aligned grid, while align-content: center vertically centered it.

Melebihi Pertimbangan Saiz

Walaupun saiz grid sepadan dengan saiz bekas, jajarkan -sifat kandungan dan justify-kandungan kekal berfungsi. Ia membolehkan pilihan jarak seperti ruang sekeliling, ruang antara dan ruang sama rata, yang mengagihkan ruang kosong antara trek grid.

Sorotan Spesifikasi

Spesifikasi Tata Letak Grid CSS menjelaskan peranan ini sifat:

• 10.3: Penjajaran Row-Axis: justify-self and justify-item menjajarkan item grid secara mendatar.
• 10.4: Lajur-Paksi Penjajaran: align-self dan align-item menjajarkan item grid secara menegak.
• 10.5: Menyelaraskan Grid: justify-content and align-content align the grid in the container if the tepi luar grid tidak sepadan dengan tepi kandungan bekas.

Atas ialah kandungan terperinci Bagaimanakah `align-item` dan `align-content` Berbeza dalam Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!