CSS - properti place-self: Panduan untuk Pemula

Halo teman-teman, para master CSS masa depan! Hari ini, kita akan melihat dunia yang menakjubkan CSS dan menjelajahi properti kecil yang handal yakni place-self. Jangan khawatir jika Anda baru saja memulai; saya akan membimbing Anda langkah demi langkah, seperti yang saya lakukan dengan murid-murid saya selama tahun tahun. Pada akhir panduan ini, Anda akan dapat menempatkan elemen seperti seorang pro!

Apa itu place-self?

Sebelum kita melompat ke dalam, mari mulai dari dasar. Properti place-self adalah singkatan untuk menetapkan kedua properti align-self dan justify-self dalam satu deklarasi. Itu seperti membunuh dua burung dengan satu batu, tapi jauh lebih manusiawi dan berkaitan dengan CSS!

Sintaks

Sintaks untuk place-self sangat sederhana:

place-self: <align-self> <justify-self>;

Jika Anda memberikan hanya satu nilai, itu berlaku untuk kedua align-self dan justify-self. Itu seperti memesan sebuah combo meal – Anda mendapat dua hal untuk harga satu!

Nilai yang Mungkin

Sekarang, mari kita lihat nilai yang beragam yang bisa kita gunakan dengan place-self. Saya akan menyajikannya dalam format tabel, yang menurut saya membantu murid mengolah informasi lebih mudah:

Nilai	Deskripsi
auto	Elemen mewarisi perilaku align-self/justify-self dari kontainer induknya
normal	Elemen ditempatkan menurut aliran normal dokumen
start	Menyelaraskan elemen ke awal kontainer
end	Menyelaraskan elemen ke akhir kontainer
center	Mengenalkan elemen di tengah kontainer
stretch	Mengeluarkan elemen agar pas dengan kontainer
flex-start	Menyelaraskan elemen ke awal kontainer fleks
flex-end	Menyelaraskan elemen ke akhir kontainer fleks
self-start	Menyelaraskan elemen ke awal sumbu sendiri
self-end	Menyelaraskan elemen ke akhir sumbu sendiri
baseline	Menyelaraskan elemen ke garis dasar kontainer
first baseline	Menyelaraskan elemen ke garis dasar pertama kontainer
last baseline	Menyelaraskan elemen ke garis dasar terakhir kontainer

Terapkan Pada

Properti place-self berlaku untuk item grid dan item fleks. Itu seperti kekuatan khusus yang hanya dimiliki oleh beberapa superhero (atau dalam kasus kita, elemen)!

Sekarang, mari kita masuk ke beberapa contoh untuk melihat bagaimana nilai ini bekerja dalam praktek.

CSS place-self - nilai normal start

.item {
place-self: normal start;
}

Deklarasi ini menempatkan elemen menurut aliran normal untuk perataan dan di awal kontainer untuk penjustifikasi. Itu seperti mengatakan ke elemenmu, "Bersedial, tapi mulai dari awal!"

CSS place-self - nilai auto center

.item {
place-self: auto center;
}

Di sini, kita mengatakan, "Warisi perataan dari indukmu, tapi pusatkan dirimu secara horizontal." Itu sempurna untuk saat Anda ingin elemenmu mengikuti aliran vertikal tapi menonjol secara horizontal.

CSS place-self - nilai center normal

.item {
place-self: center normal;
}

Ini memusatkan elemen secara vertikal tapi mempertahankan aliran normal secara horizontal. Bayangkan elemenmu berada di tengah sebuah pesta – dia berada di tengah ruangan tapi masih mengikuti etiket pesta!

CSS place-self - nilai end normal

.item {
place-self: end normal;
}

Ini menyelaraskan elemen ke akhir kontainer secara vertikal saat mempertahankan aliran normal secara horizontal. Itu seperti elemenmu berdiri di ujung kumpulan!

CSS place-self - nilai start auto

.item {
place-self: start auto;
}

Ini menempatkan elemen di awal kontainer secara vertikal dan mewarisi perataan horizontal. Itu seperti mengatakan, "Saya akan mulai di atas, tapi akan mengikuti aliran secara horizontal."

CSS place-self - nilai self-start auto

.item {
place-self: self-start auto;
}

Ini menyelaraskan elemen ke awal tepi sumbunya secara vertikal dan mewarisi perataan horizontal. Itu seperti elemenmu mengatakan, "Saya akan melakukan hal saya sendiri secara vertikal, tapi akan mengikuti kumpulan secara horizontal."

CSS place-self - nilai self-end normal

.item {
place-self: self-end normal;
}

Ini menyelaraskan elemen ke ujung tepi sumbunya secara vertikal dan mempertahankan aliran normal secara horizontal. Itu seperti elemenmu mencapai langit dengan kaki tetap kokoh di tanah!

CSS place-self - nilai flex-start auto

.item {
place-self: flex-start auto;
}

Dalam kontainer fleks, ini menyelaraskan elemen ke awal kontainer secara vertikal dan mewarisi perataan horizontal. Itu sempurna untuk item fleks yang ingin mulai di atas tapi mengikuti aliran fleks secara horizontal.

CSS place-self - nilai flex-end normal

.item {
place-self: flex-end normal;
}

Dalam kontainer fleks, ini menyelaraskan elemen ke akhir kontainer secara vertikal dan mempertahankan aliran normal secara horizontal. Itu seperti item fleks Anda melakukan langkah berlikir!

CSS place-self - nilai baseline normal

.item {
place-self: baseline normal;
}

Ini menyelaraskan garis dasar elemen ke garis dasar kontainer secara vertikal dan mempertahankan aliran normal secara horizontal. Itu bagus untuk mengatur teks di sepanjang elemen berbeda.

CSS place-self - nilai last baseline normal

.item {
place-self: last baseline normal;
}

Mirip dengan baseline, tapi menggunakan garis dasar terakhir jika terdapat beberapa garis dasar. Itu seperti memberikan kata terakhir bagi elemenmu!

CSS place-self - nilai stretch auto

.item {
place-self: stretch auto;
}

Ini melebar elemen agar pas dengan kontainer secara vertikal dan mewarisi perataan horizontal. Itu seperti elemenmu mengatakan, "Saya akan sebising mungkin, tapi akan mengikuti aliran secara horizontal."

Dan begitu saja, teman-teman! Kita telah menjelajahi properti place-self dan nilai-nilainya. Ingat, kunci untuk menjadi ahli CSS adalah latihan. Jadi, cobalah nilai-nilai ini, campurkan dan cobalah, dan lihat apa saja desain yang indah yang Anda bisa buat!

Dalam tahun-tahun mengajar saya, saya menemukan bahwa murid yang mencoba dan bersenang-senang dengan CSS biasanya belajar lebih cepat dan mengingat lebih banyak. Jadi jangan takut untuk menjadi kreatif! Siapa tahu? Anda mungkin menemukan kombinasi yang menjadi gaya tanda tangan Anda.

Selamat coding, dan semoga elemen Anda selalu ditempatkan dengan sempurna!

Credits: Image by storyset