Apakah perbezaan antara \'align-items\' dan \'align-content\' dalam Reka Letak Grid CSS?

Memahami Perbezaan antara "align-item" dan "align-content" dalam Grid Layout

Modul Grid Layout memperkenalkan dua set sifat, "justify/align-item" dan "justify/align-content," yang memainkan peranan berbeza dalam menjajarkan item grid dan grid itu sendiri dalam bekas grid.

Penjelasan Terminologi Grid

• Bekas Grid: Bekas induk yang mentakrifkan ruang grid keseluruhan.
• Grid: Grid berstruktur garisan yang membahagikan bekas grid ke dalam kawasan grid.
• Item Grid: Kotak yang mengandungi kandungan aliran masuk dalam kawasan grid.

Sejajarkan item lwn. Jajarkan-kandungan

Sifat "selaraskan-item" dan "selaraskan-kandungan", seperti yang dicadangkan oleh namanya, masing-masing menjajarkan item grid dan grid. Khususnya:

• justify-kandungan dan align-content sejajarkan trek grid dalam kotak kandungan bekas grid.
• justify-self dan justify-item jajaran item grid dalam dimensi sebaris (mendatar secara lalai).
• align-self dan align-item align item grid dalam dimensi blok (menegak secara lalai).

Menangani Tuntutan Pengarang

Dakwaan pengarang bahawa " -content" wujud kerana "kadangkala jumlah saiz grid anda mungkin kurang daripada saiz bekas gridnya" menyerlahkan perkara berikut:

• Apabila grid lebih kecil daripada bekas grid, terdapat ruang kosong tersedia.
• Sifat "justify-content" dan "align-content" boleh menggunakan ruang ini untuk menjajarkan grid secara berpusat atau sebaliknya dalam bekas.
• Sebaliknya, jika grid saiz sama dengan saiz bekas, tiada ruang kosong dan sifat penjajaran ini tidak mempunyai kesan.

Ilustrasi untuk Kejelasan

[Imej ilustrasi daripada W3C menunjukkan grid lebih kecil daripada bekasnya, dengan "justify-content" dan "align-content" menjajarkan grid dalam bekas.]

Petikan daripada Spesifikasi

Untuk kejelasan, petikan yang berkaitan daripada spesifikasi Reka Letak Grid CSS disediakan:

• "Item grid boleh dijajarkan dalam dimensi sebaris dengan menggunakan sifat justify-self pada item grid atau sifat justify-item pada bekas grid."
• "Item grid juga boleh dijajarkan dalam dimensi blok dengan menggunakan sifat align-self pada item grid atau sifat align-item pada bekas grid."
• "Jika tepi luar grid tidak sepadan dengan tepi kandungan bekas grid, trek grid dijajarkan dalam kotak kandungan mengikut sifat justify-content dan align-content pada bekas grid."

Atas ialah kandungan terperinci Apakah perbezaan antara 'align-items' dan 'align-content' dalam Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!