Rumah >hujung hadapan web >tutorial css >Bagaimanakah `justify-content`, `justify-item` dan `justify-self` Berbeza dalam Reka Letak Grid CSS?

Bagaimanakah `justify-content`, `justify-item` dan `justify-self` Berbeza dalam Reka Letak Grid CSS?

DDD
DDDasal
2024-12-02 11:09:14139semak imbas

How Do `justify-content`, `justify-items`, and `justify-self` Differ in CSS Grid Layout?

Memahami justify-self, justify-item dan justify-content dalam CSS Grid

Kekeliruan anda mengenai persamaan dan perbezaan antara ini tiga sifat boleh difahami, kerana dokumentasi sering memfokuskan pada Flex-box dan bukannya Grid. Untuk menjelaskan:

1. Hubungan antara Flex-box dan Grid Properties

Properties justify-self dan justify-item tidak dilaksanakan dalam Flex-box. Perbezaan ini berpunca daripada sifat satu dimensi Flex-box, yang menjadikan mewajarkan satu item mustahil. Oleh itu, Flex-box bergantung pada sifat justify-content untuk penjajaran sepanjang paksi utama.

2. Peranan justify-self, justify-item and justify-content

  • justify-content: Menjajarkan keseluruhan grid sepanjang paksi baris. Sifat ini mengawal jarak antara item grid dalam arah mendatar.
  • justify-item: Menjajarkan kandungan di dalam item grid individu di sepanjang paksi baris. Ia menjejaskan penjajaran kandungan dalam sel grid.
  • justify-self: Menjajarkan item grid semasa dalam sel grid induknya di sepanjang paksi baris. Sifat ini melaraskan penjajaran item grid tertentu secara individu.

3. Perbezaan Utama

Bantuan visual berikut memberikan demonstrasi yang jelas tentang perbezaan antara sifat ini:

[Imej susun atur grid dengan penjajaran kandungan, item grid dan grid yang berbeza sendiri]

Sumber Tambahan

Untuk selanjutnya pandangan, rujuk perkara berikut artikel:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_G rid_Layout
  • https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/

Atas ialah kandungan terperinci Bagaimanakah `justify-content`, `justify-item` dan `justify-self` Berbeza 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