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!
Kenyataan:Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn