Apakah Perbezaan Antara `justify-content`, `justify-item` dan `justify-self` dalam Grid CSS?

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

CSS Grid layout menawarkan pelbagai sifat untuk menjajarkan dan mengagihkan elemen grid. Walau bagaimanapun, menavigasi persamaan dan perbezaan antara justify-self, justify-item dan justify-content boleh mengelirukan. Artikel ini bertujuan untuk menjelaskan perbezaan mereka.

1. Flexbox lwn. Grid Properties

Tidak seperti justify-self and justify-item, justify-item bukanlah harta dalam Flexbox. Ini disebabkan oleh sifat satu dimensi Flexbox, di mana menjajarkan berbilang item di sepanjang paksi menimbulkan cabaran. Dalam Flexbox, justify-content berfungsi sebagai cara utama penjajaran item.

2. Tujuan justify-content, justify-self, dan justify-item

• justify-content: Menjajarkan item grid sepanjang paksi baris (mendatar), memastikan ia berada teragih sama rata dalam grid bekas.
• justify-item: Letakkan kandungan dalam setiap item grid di sepanjang paksi baris, melaraskan penjajaran mendatar bagi elemen anaknya.
• justify- diri: Mengawal penjajaran item grid tertentu dalam baris grid, memberikan kawalan yang lebih berbutir ke atas item individu penempatan.

3. Perbezaan Antara justify-content, justify-self, and justify-item

Perbezaan utama terletak pada skop dan tahap kawalannya:

• Skop: justify-kandungan mempengaruhi penjajaran semua item grid dalam satu baris, manakala justify-self dan justify-item bekerja pada tahap item grid individu dan kandungannya.
• Kebutiran: justify-content menyediakan pilihan penjajaran untuk keseluruhan baris, manakala justify-self membenarkan penjajaran item individu dalam baris dan justify-item mengendalikan penjajaran kandungan dalam item tersebut.

Sumber untuk Pemahaman Lanjut

• Rangkaian Pembangun Mozilla: Penjajaran Kotak Susun Letak Grid CSS
• Majalah Pecah: Membina Reka Letak Grid CSS Sedia Pengeluaran
• Majalah Pecah: Grid CSS Inspektor

Berinspirasi Contoh

• Majalah Smashing: Pemenang Cabaran Grid CSS 2017

Atas ialah kandungan terperinci Apakah Perbezaan Antara `justify-content`, `justify-item` dan `justify-self` dalam Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!