Atribut justify-self CSS

Definisi dan penggunaan

Atribut justify-self menarik item grid di dalam kawasan grid unit sepanjang arah baris dalam.

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

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

Petunjuk:Untuk menarik item grid di arah blok bukannya arah baris, gunakan Atribut align-self atau Atribut align-items Atribut.

Lihat juga:

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 juga:

Contoh

Contoh 1

Penarikan item grid di sebelah kanan kawasan grid unit:

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

Cuba sendiri

Contoh 2: bandingkan justify-self dengan justify-items

Tetapkan gaya penarikan terhadap kontainer ke 'tengah', tetapkan item grid sendiri ke 'kanan'. nilai atribut 'kanan' mendominasi:

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

Cuba sendiri

Contoh 3: Tetapkan justify-self di atas item grid yang absolute

Tetapkan gaya penarikan bagi item penempatan grid yang absolute ke 'kanan':

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

Cuba sendiri

Contoh 4: writing-mode

Sesuatu seperti kontainer grid elemen atribut writing-mode diset ke vertical-rl, arah baris dalam adalah ke bawah. Hasilnya titik awal kontainer pindah dari kiri ke atas, titik akhir kontainer pindah dari kanan ke bawah:

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

Cuba sendiri

Contoh 5: direction

Saat nilai sifat direction elemen kontainer grid ditetapkan kepada 'rtl', arah baris dalam arah baris dalaman adalah dari kanan ke kiri. Hasilnya, titik permulaan kontainer dipindahkan dari kiri ke kanan, dan titik akhir kontainer dipindahkan dari kanan ke kiri:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: penghujung;
}

Cuba sendiri

Rumus CSS

justify-self: auto|normal|stretch|penalaran posisi|penalaran melimpah|penalihan garisan asas|initial|inherit;

Nilai sifat

Nilai Penerangan
auto Nilai lalai. Mewarisi nilai sifat justify-self kontainer grid.
normal

bergantung kepada konteks tata letak, tetapi seperti 'mengecuh' item grid dalam tata letak grid yang belum ditetapkan ukuran.

Jika ukuran ditetapkan, perilaku nilai sifat seperti 'permulaan'.
mengecuh Jika ukuran baris tidak ditetapkan (lebar), ia akan mengecuh untuk mengisi sel grid.
permulaan Menalaran objek di permulaan arah baris.
kiri Menalaran objek ke kiri.
tengah Menalaran objek ke tengah.
penghujung Menalaran objek di penghujung arah baris.
kanan Menalaran kanan objek.
penalaran melimpah
  • 'safe' akan menetapkan cara penalaran objek kepada 'start', jika kandungan melimpah.
  • 'unsafe' mempertahankan nilai penalaran, walaupun kandungan objek melimpah.
penalihan garisan asas Elemen sepadan dengan garisan asas elemen bapanya.
initial Tetapkan sifat ini kepada nilai lalainya. Lihat: initial.
inherit Mewarisi sifat ini dari elemen bapanya. Lihat: inherit.

Perincian teknologi

Nilai lalai: auto
Warisan: Tidak
Pembuatan animasi: Tidak disokong. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Rumus JavaScript: object.style.justifySelf="right"

Pendukung pereka

Nombor di dalam jadual menunjukkan versi pereka paling awal yang menyokong sifat ini.

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