ID (Indonesia) Translation

CSS - place-content: Panduan Ramah untuk Pemula

Halo sana, superstar desain web masa depan! ? Siap untuk melompat ke dunia yang menakjubkan CSS? Hari ini, kita akan mengexplore sebuah properti kecil yang menyenangkan yang disebut place-content. Percayalah, ini akan membuat hidupmu jauh lebih mudah saat mencoba mengatur hal-hal dalam tata letak webmu. Jadi, grab sepiring kopi (atau teh, jika itu hal yang kamu sukai), dan mari kita mulai!

Apa itu place-content?

Imaginasi bahwa kamu sedang mengatur furnitur di dalam sebuah kamar. Kamu ingin semua hal terlihat sempurna, tapi memindahkan setiap piece secara individual adalah kesulitan. Itu di mana place-content masuk - itu seperti memiliki tongkat ajaib yang membantu kamu mengatur elemen di halaman webmu dengan mudah!

Properti place-content adalah singkatan untuk mengatur align-content dan justify-content dalam satu langkah. Itu seperti membunuh dua burung dengan satu batu (tetapi jangan khawatir, tidak ada burung yang terluka dalam membuat properti CSS ini ?).

Nilai Yang Mungkin

Wah, kita punya beberapa opsi disini! Mari kita pecahkannya dalam tabel yang mudah dibaca:

Nilai	Deskripsi
center	Mengatur konten di tengah secara vertikal dan horizontal
start	Mengatur konten di awal kontainer
end	Mengatur konten di akhir kontainer
flex-start	Similar ke start, tapi untuk kontainer flex
flex-end	Similar ke end, tapi untuk kontainer flex
baseline	Mengatur konten sepanjang garis dasar
space-between	Mengatur item secara rata-rata dengan ruang antaranya
space-around	Mengatur item secara rata-rata dengan ruang di sekitarnya
space-evenly	Mengatur item dengan ruang yang sama antar dan sekitarnya

Jangan khawatir jika ini terlihat membingungkan - kita akan melalui setiap satu dengan contoh!

Terapkan Pada

Sebelum kita masuk ke detil, penting untuk mengetahui di mana kita bisa menggunakan place-content. Properti ini diterapkan pada:

• Kontainer Grid
• Kontainer Flex

Jadi, jika kamu sedang bekerja dengan grid atau flexbox (yang, percayalah, kamu akan melakukannya), place-content adalah teman baru kamu!

Sintaks

Sintaks dasar untuk place-content sangat sederhana:

.container {
place-content: <align-content> <justify-content>;
}

Kamu bisa menggunakan satu atau dua nilai. Jika kamu menggunakan satu, itu diterapkan pada kedua arah penjajaran. Jika kamu menggunakan dua, yang pertama untuk align-content (penjajaran vertikal) dan yang kedua untuk justify-content (penjajaran horizontal).

Sekarang, mari kita lihat beberapa contoh khusus!

CSS place-content - center start Value

.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}

Dalam contoh ini, konten akan diletakkan di tengah secara vertikal tapi diperjajaran ke awal (sebelah kiri dalam bahasa kiri-ke-kanan) secara horizontal. Itu seperti mendorong semua furnitur ke satu sisi kamar tapi menjaga mereka di tengah secara vertikal.

CSS place-content - start center Value

.container {
display: flex;
place-content: start center;
height: 200;
border: 2px solid #333;
}

Di sini, kita melakukan hal yang sebaliknya - mengatur konten ke atas tapi diletakkan di tengah secara horizontal. Pensejukkan seperti menempatkan semua furnitur di sepanjang dinding atas tapi menempatkan mereka secara merata dari kiri ke kanan.

CSS place-content - end right Value

.container {
display: grid;
place-content: end right;
height: 200;
border: 2px solid #333;
}

Ini akan mendorong semua konten ke sudut bawah-kanan kontainer. Itu seperti mendorong semua furnitur ke satu sudut kamar (tidak disarankan untuk dilakukan dalam kehidupan nyata ?).

CSS place-content - flex-start center Value

.container {
display: flex;
place-content: flex-start center;
height: 200;
border: 2px solid #333;
}

Similar ke start center, tapi khusus untuk kontainer flex. Konten kamu akan berada di atas (atau kiri dalam arah kolom) dan diletakkan di tengah secara horizontal.

CSS place-content - flex-end center Value

.container {
display: flex;
place-content: flex-end center;
height: 200;
border: 2px solid #333;
}

Ini seperti flex-start center, tapi mengatur ke akhir kontainer flex bukan ke awal.

CSS place-content - last baseline Value

.container {
display: grid;
place-content: last baseline;
height: 200;
border: 2px solid #333;
}

Ini agak sulit. Itu mengatur konten sepanjang garis dasar baris terakhir teks. Itu seperti memastikan semua teks kamu duduk rapi di atas garis takhta yang tak terlihat.

CSS place-content - space-between Value

.container {
display: flex;
place-content: space-between;
height: 200;
border: 2px solid #333;
}

Ini mendistribusikan item secara rata-rata, dengan item pertama di awal dan item terakhir di akhir. Gamalkan seperti menempatkan furnitur di dalam kamar dengan ruang yang sama antar setiap piece, tapi ditekan ke pinggir.

CSS place-content - space-around Value

.container {
display: grid;
place-content: space-around;
height: 200;
border: 2px solid #333;
}

Similar ke space-between, tapi juga menambahkan ruang sebelum item pertama dan setelah item terakhir. Itu seperti memberikan setiap piece furnitur sendiri area kecil di dalam kamar.

CSS place-content - space-evenly Value

.container {
display: flex;
place-content: space-evenly;
height: 200;
border: 2px solid #333;
}

Ini mendistribusikan item dengan ruang yang sama antar dan sekitarnya. Itu adalah pendekatan yang paling seimbang, seperti menempatkan furnitur secara sempurna di dalam kamar.

Dan itu saja! Kamu telah belajar tentang properti place-content dan nilai-nilainya. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba ini dalam proyekmu sendiri. Sebelum kamu tahu, kamu akan menempatkan konten seperti seorang ahli!

Terus coding, terus belajar, dan yang paling penting, bersenang-senang dengan itu! ??‍??‍?

Credits: Image by storyset