Atribut place-self CSS

Referensi: Halaman sebelumnya
Halaman berikutnya pointer-events

Definisi dan Penggunaan

place-self Properti ini digunakan untuk menarik item grid tunggal, adalah singkatan dari berbagai properti berikut:

align-self
justify-self

Jika properti place-self memiliki dua nilai:

place-self: start center;

Nilai properti align-self adalah 'start'
Nilai properti justify-self adalah 'center'

Jika properti place-self hanya memiliki satu nilai:

place-self: end;

Maka nilai properti align-self dan justify-self adalah 'end'

Contoh

Contoh 1

Menyamakan item grid tunggal di posisi akhir di arah blok dan arah baris:

#myDiv {
  place-self: end;
}

coba sendiri

Contoh 2: Mode Tulis

Ketika elemen <div> writing-mode Ketika nilai properti diatur menjadi 'vertical-rl', posisi akhir sel kisi di arah blok bergerak dari bawah ke kiri, dan posisi akhir di arah baris bergerak dari kanan ke bawah:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

coba sendiri

contoh 3: layout box elastic

place-self atribut ini juga dapat digunakan untuk proyek layout box elastic, tetapi justify-self nilai kedua akan diabaikan, karena hal ini tidak berlaku dalam layout box elastic:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

coba sendiri

syntaks CSS

place-self: auto|nilai|initial|inherit;

nilai atribut

nilai	deskripsi
auto	standar. Nilai place-self standar elemen.
normal	tergantung konteks layout, tetapi untuk proyek grid yang belum diset ukuran, perilakunya seperti 'lilit' dalam layout grid. jika ukuran diset, perilaku nilai atribut seperti 'awal'.
lilit	jika ukuran belum diset, lilit untuk memenuhi sel grid.
awal	menyesuaikan proyek ke posisi awal dalam arah baris dan blok.
kiri	menyesuaikan proyek ke kiri dalam arah baris, sebagai nilai justify-self.
pusat	menyesuaikan proyek ke pusat.
akhir	menyesuaikan proyek ke posisi akhir dalam arah baris dan blok.
kanan	menyesuaikan proyek ke kanan dalam arah baris, sebagai nilai justify-self.
penyesuaian kelebihan	'safe': jika konten kelebihan, pengaturan penyesuaian proyek diatur ke 'start'. 'unsafe': tetap mempertahankan nilai penyesuaian tanpa menghiraukan adanya kelebihan konten.
penyesuaian garis dasar	elemen berjejer dengan garis dasar elemen induknya.
initial	atur atribut ini ke nilai standarnya. Lihat initial.
inherit	mengambil atribut ini dari elemen induknya. Lihat inherit.

detil teknis

nilai standar:	auto
kejitradaraan:	tidak
pembuatan animasi:	tidak didukung. Lihat:atribut berhubungan dengan animasi.
versi:	CSS3
syntaks JavaScript:	object.style.placeSelf="end stretch"