Rumah >hujung hadapan web >tutorial css >Apakah Perbezaan Antara `justify-content`, `justify-item` dan `justify-self` dalam Grid CSS?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-01 15:22:10832semak imbas

What's the Difference Between `justify-content`, `justify-items`, and `justify-self` in CSS Grid?

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!

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