Properti justify-items CSS

Definisi dan penggunaan

Atribut justify-items diatur di kontainer grid, untuk menarik anak elemen (item grid) dalam arah teks dalam baris.

Untuk halaman berbahasa Inggris, arah teks dalam baris adalah dari kiri ke kanan, dan arah blok adalah ke bawah.

Untuk membuat atribut ini memiliki efek penarikan, item grid harus mempunyai ruang yang tersedia di sekeliling dirinya dalam arah teks dalam baris.

Panduan:Untuk menarik item grid dalam arah blok daripada arah teks dalam baris, gunakan Atribut align-items Atribut.

Lihat juga:

Panduan CSS:CSS Grid

Panduan CSS:Pengaturan Lokasi CSS

Panduan Referensi CSS:Atribut align-items

Panduan Referensi CSS:Atribut direction

Panduan Referensi CSS:Atribut grid

Panduan Referensi CSS:Atribut grid-template-columns

Panduan Referensi CSS:Atribut justify-self

Panduan Referensi CSS:Atribut position

Panduan Referensi CSS:Atribut writing-mode

Contoh

Contoh 1

Menarik setiap item grid ke ujung terakhir kubiknya dalam arah teks dalam baris:

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

Coba sendiri

Contoh 2: Perbandingan justify-items dengan justify-self

Atur cara penarikan terhadap kontainer menjadi 'tengah', tetapi atur item grid menjadi 'kanan sejajar'. Nilai atribut 'right' mendominasi:

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

Coba sendiri

Contoh 3: Atur justify-items pada item grid yang terpasang dengan pengaturan lokasi absolut

Atur cara penarikan item grid yang terpasang dengan pengaturan lokasi absolut menjadi 'kanan sejajar':

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

Coba sendiri

Contoh 4: writing-mode

Ketika nilai atribut writing-mode elemen kontainer grid disetel menjadi vertical-rl, arah teks dalam baris menjadi ke bawah. Hasilnya, titik awal kontainer pindah dari kiri ke atas, dan titik akhir kontainer pindah dari kanan ke bawah:

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

Coba sendiri

Contoh 5: direction

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

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

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
legacy

Nilai default.

Hanya saat nilai justify-self adalah 'auto' dalam 'legacy', item grid menurunkan nilai atribut justify-items container grid.

Adanya adalah untuk mencapai perilaku sejajaran warisan HTML <center> elemen dan atribut align.
normal Tergantung konteks layout, tetapi seperti 'stretch' dalam tata letak grid.
stretch Jika inline-size (lebar) belum diatur, luncurkan untuk mengisi sel grid.
start Menatur proyek untuk sejajaran di awal arah baris.
left Menatur proyek untuk sejajaran kiri.
center Menatur proyek untuk sejajaran di tengah.
end Menatur proyek untuk sejajaran di ujung arah baris.
right Menatur proyek untuk sejajar kanan.
overflow-alignment
  • 'safe' akan menatur metode sejajaran proyek menjadi 'start', jika konten mengalami kelebihan.
  • 'unsafe' mempertahankan nilai sejajar, terlepas dari apakah konten proyek mengalami kelebihan.
baseline-alignment Elemen diatur untuk sejajar dengan garis dasar elemen induk.
initial Atur 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 yang berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.justifyItems="center"

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama 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