Rumah  >  Artikel  >  hujung hadapan web  >  Apakah perbezaan antara \"align-items\" dan \"align-content\" dalam Reka Letak Grid CSS?

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

Barbara Streisand
Barbara Streisandasal
2024-11-01 01:49:28128semak imbas

What's the difference between

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