Atribut justify-self CSS

Definisi dan penggunaan

Atribut justify-self menempatkan item grid di dalam sel gridnya sepanjang arah baris dalam.

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

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

Tips:Untuk menempatkan item grid dalam arah blok daripada arah baris dalam, gunakan Atribut align-self atau Atribut align-items Atribut.

Lihat pula:

Panduan CSS:CSS Grid

Panduan CSS:Pemosisian CSS

Panduan CSS:Atribut align-content

Panduan CSS:Atribut align-items

Panduan CSS:Atribut align-self

Panduan CSS:Atribut direction

Panduan CSS:Atribut grid

Panduan CSS:Atribut grid-template-columns

Panduan CSS:Atribut position

Panduan CSS:Atribut writing-mode

Lihat pula:

Contoh

Contoh 1

Jadikan item grid sejajar dengan kanan dalam sel gridnya:

.red {
  display: grid;
  justify-self: kanan;
}

Coba sendiri

Contoh 2: Perbandingan justify-self dengan justify-items

Atur cara penempatan yang berdasarkan kontainer menjadi 'tengah', dan item grid sendiri disetel menjadi 'kanan'. Nilai atribut 'kanan' mendominasi:

#container {
  display: grid;
  justify-items: tengah;
}
.blue {
  justify-self: kanan;
}

Coba sendiri

Contoh 3: Atur justify-self pada item grid yang ditempatkan absolut

Atur cara penempatan item grid yang ditempatkan absolut menjadi 'kanan':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: kanan;
}

Coba sendiri

Contoh 4: writing-mode

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

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Coba sendiri

Contoh 5: direction

Ketika nilai atribut direction elemen kontainer grid diatur ke '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 {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Coba sendiri

Sintaksi CSS

justify-self: auto|normal|stretch|penyejajaran posisi|penyejajaran-overflow|Penyejajaran jalur dasar|initial|inherit;

Nilai atribut

Nilai Deskripsi
auto Nilai standar. Turun warisan nilai atribut justify-self wadah grid.
normal

Tergantung konteks layout, tetapi hampir seperti 'luncur' item grid dalam layout grid saat size belum diatur.

Jika diatur size, perilaku nilai atribut hampir seperti 'start'.
luncur Jika inline-size (lebar) belum diatur, maka diluncurkan untuk mengisi sel grid.
awal Menyejarkan proyek di awal arah baris.
kiri Menyejarkan proyek ke kiri.
pusat Menyejarkan proyek ke pusat.
ujung Menyejarkan proyek di ujung arah baris.
kanan Menyejarkan proyek ke kanan.
penyejajaran-overflow
  • 'safe' akan mengatur penyejajaran proyek ke 'start', jika konten meluas.
  • 'unsafe' mempertahankan nilai penyejajaran, terlepas dari apakah konten proyek meluas.
Penyejajaran jalur dasar Elemen berada di jalur dasar elemen induk.
initial Tetapkan atribut ini ke nilai standarnya. Lihat: initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai standar: auto
Turunan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Sintaksi JavaScript: object.style.justifySelf="right"

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung sifat ini.

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