属性 CSS justify-items

Definisi dan penggunaan

Properti justify-items diatur di atas kontainer grid, untuk mengatur penempatan anak elemen (item grid) dalam arah dalam baris.

Untuk halaman bahasa Inggeris, arah dalam baris adalah dari kiri ke kanan, dan arah blok adalah turun.

Untuk membuat properti ini mempunyai efek penempatan, item grid perlu menyediakan ruang yang tersedia di sekeliling dirinya dalam arah dalam baris.

Petikan:Untuk menempatkan item grid dalam arah blok daripada arah dalam baris, gunakan Properti align-items Properti.

Lihat juga:

Panduan CSS:CSS Grid

Panduan CSS:Pengaturan Lokasi CSS

Panduan CSS:Properti align-items

Panduan CSS:Properti direction

Panduan CSS:Properti grid

Panduan CSS:Properti grid-template-columns

Panduan CSS:Properti justify-self

Panduan CSS:Properti position

Panduan CSS:Properti writing-mode

Contoh

Contoh 1

Letakkan setiap item grid di akhir unit grid dalam arah dalam baris:

#container {
  display: grid;
  justify-items: end;
}

Coba sendiri

Contoh 2: Perbandingan justify-items dengan justify-self

Atur cara penempatan dalam kontainer untuk 'centered', dan item grid sendiri untuk 'right-align'. nilai properti 'right' mendominasi:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Coba sendiri

Contoh 3: Atur justify-items di atas item grid yang mempunyai penempatan absolut

Atur cara penempatan item grid yang mempunyai penempatan absolut untuk 'right-align':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Coba sendiri

Contoh 4: writing-mode

Jika nilai properti writing-mode elemen kontainer grid diatur kepada vertical-rl, arah dalam baris akan turun. Hasilnya, titik awal kontainer dipindahkan ke atas dan titik akhir kontainer dipindahkan ke bawah:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Coba sendiri

Contoh 5: direction

Ketika nilai atribut direction elemen container grid diatur menjadi 'rtl', arah baris dalam arah baris adalah dari kanan ke kiri. Akibatnya, titik awal kontainer pindah dari kiri ke kanan, dan titik ujung kontainer pindah dari kanan ke kiri:

#container {
  justify-items: start;
  direction: rtl;
}

Coba sendiri

Syntaks CSS

justify-items: legacy|normal|stretch|pengecekan posisi|overflow-alignment|pengecekan garis dasar|initial|inherit;

Nilai atribut

Nilai Deskripsi
legacy

Nilai default.

Hanya saat nilai justify-self item di grid dimulai dengan 'legacy', item grid yang nilai 'auto' mewarisi nilai atribut justify-items container grid.

Adanya adalah untuk mencapai kelanjutan tindakan pengecekan elemen HTML <center> dan atribut align.
normal Tergantung konteks layout, tetapi mirip dengan 'stretch' tata letak grid.
stretch Jika inline-size (lebar) belum disetel, lilit untuk memenuhi sel grid.
start Menempatkan proyek di awal arah baris.
left Menempatkan proyek di sebelah kiri.
center Menempatkan proyek di tengah.
end Menempatkan proyek di ujung belakang arah baris.
right Menyetel proyek untuk berada di sebelah kanan.
overflow-alignment
  • 'safe' akan menetapkan gaya pengecekan proyek menjadi 'start', jika konten mengalir.
  • 'unsafe' mempertahankan nilai pengecekan, terlepas dari apakah konten proyek mengalir.
baseline-alignment Elemen berada di garis dasar dengan elemen induk.
initial Setel atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: legacy
Warisan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.justifyItems="center"

Dukungan browser

Angka di dalam tabel menunjukkan versi browser yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0