CSS - min-block-size Sifat: Panduan Untuk Pemula

Hai在那里，para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia yang menakjubkan CSS dan menjelajahi sifat yang mungkin terdengar menakutkan pada awalnya, tapi saya janji Anda akan menemukannya sangat menarik sekali kita merobahnya. mari bicarakan tentang sifat min-block-size!

Apa Itu min-block-size?

Sebelum kita melompat ke hal-hal kecil, mari pahami apa arti min-block-size sebenarnya. Bayangkan Anda membangun menara dengan blok. min-block-size seperti mengatakan, "Hey, tanpa menghiraukan apa pun, menara ini harus setinggi ini!" Itu menentukan ukuran minimum dari elemen dalam arah blok.

Sekarang, Anda mungkin bertanya-tanya, "Apa itu arah blok?" Well, dalam kebanyakan kasus untuk bahasa Inggris dan bahasa yang mirip, itu adalah arah vertikal. Tetapi jangan khawatir, kita akan mengungkapkan ini lebih banyak nanti!

Nilai yang Mungkin

Bergambar nilai yang berbeda yang kita dapat gunakan dengan min-block-size:

Nilai	Deskripsi
<length>	Ukuran tetap seperti 100px, 2em, dll.
<percentage>	Persentase dari ukuran blok yang memuat
auto	Browser menghitung ukuran blok minimum
max-content	Ukuran blok preferred intrinsik
min-content	Ukuran blok minimum intrinsik
fit-content	Menggunakan ruang yang tersedia, tetapi tidak kurang dari min-content atau lebih dari max-content

Jangan khawatir jika ini terlihat membingungkan sekarang. Kita akan mengungkapkan setiap nilai dengan contoh!

Terapkan Pada

Sifat min-block-size berlaku untuk semua elemen kecuali:

• Elemen inline, non-ganti
• Baris tabel
• Grup baris

Sintaks

Sintaks dasar cukup sederhana:

min-block-size: nilai;

Mari masuk ke beberapa contoh untuk melihat bagaimana ini bekerja dalam praktek!

CSS min-block-size - Nilai

Mari mulai dengan contoh sederhana menggunakan panjang tetap:

<div class="box">
Ini adalah kotak dengan min-block-size diatur ke 100px.
</div>

.box {
min-block-size: 100px;
background-color: lightblue;
padding: 10px;
}

Dalam contoh ini, kita mengatakan ke browser, "Tidak peduli apa konten di dalam kotak ini, pastikan itu setidaknya 100 pixel tinggi." Jika konten kurang dari 100px, kotak tetap akan 100px tinggi. Jika lebih, kotak akan diperluas untuk memuat konten.

CSS min-block-size - Nilai max-content

Sekarang, mari lihat nilai max-content:

<div class="container">
<div class="box">
Kotak ini akan diperluas untuk memuat kontennya, tetapi tidak lebih kecil dari ukurannya max-content.
</div>
</div>

.container {
width: 200px;
background-color: #f0f0f0;
}

.box {
min-block-size: max-content;
background-color: lightgreen;
padding: 10px;
}

Dalam kasus ini, max-content mengatakan ke browser untuk membuat kotak sebanyak yang diperlukan untuk memuat semua konten tanpa memotong baris. Jika Anda mengubah ukuran jendela browser Anda, Anda akan melihat bahwa kotak selalu tinggi cukup untuk memuat semua teks dalam satu baris.

CSS min-block-size - Dengan Teks Horizontal dan Vertikal

Sekarang, mari kita menjadi lebih petarung dan lihat bagaimana min-block-size berperilaku dengan arah teks yang berbeda:

<div class="horizontal">
Ini adalah teks horizontal
</div>
<div class="vertical">
Ini adalah teks vertikal
</div>

.horizontal, .vertical {
min-block-size: 150px;
background-color: lightyellow;
margin-bottom: 20px;
padding: 10px;
}

.vertical {
writing-mode: vertical-rl;
}

Dalam contoh ini, kita memiliki dua kotak dengan min-block-size yang sama. Untuk teks horizontal, ini menentukan tinggi minimum. Tetapi untuk teks vertikal, itu menentukan lebar minimum! Ini karena min-block-size selalu merujuk ke arah blok, yang berubah saat kita mengubah mode penulisan.

Aplikasi Praktis

Anda mungkin bertanya-tanya, "Kapan saya sebenarnya akan menggunakannya dalam kehidupan nyata?" Pertanyaan yang bagus! Ini adalah beberapa scenario:

1. Desain Responsif: Anda dapat menggunakan min-block-size untuk memastikan elemen tidak menjadi terlalu kecil pada perangkat mobile.

2. Tata Letak Fleksibel: Itu sempurna untuk membuat tata letak fleksibel yang menyesuaikan ukuran konten sambil menjaga ukuran minimum.

3. Desain Kartu: Saat membuat tata letak kartu, min-block-size dapat memastikan semua kartu memiliki tinggi minimum yang konsisten.

Mari lihat contoh desain kartu:

<div class="card-container">
<div class="card">
<h2>Kartu 1</h2>
<p>Kartu ini memiliki deskripsi pendek.</p>
</div>
<div class="card">
<h2>Kartu 2</h2>
<p>Kartu ini memiliki deskripsi yang lebih panjang dan terus-menerus untuk menunjukkan bagaimana min-block-size bekerja.</p>
</div>
</div>

.card-container {
display: flex;
gap: 20px;
}

.card {
min-block-size: 200px;
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 20px;
flex: 1;
}

Dalam contoh ini, kedua kartu akan memiliki tinggi minimum 200px, tetapi kartu kedua akan diperluas untuk memuat konten yang lebih panjang. Ini menciptakan penampilan rapih dan konsisten sambil menyesuaikan panjang konten yang berbeda.

Kesimpulan

Dan itu saja, teman-teman! Kita telah mengungkapkan sifat min-block-size, dari sintaks dasar ke beberapa aplikasi praktis. Ingat, CSS tentang eksperimen, jadi jangan khawatir untuk bermain dengan sifat ini dan lihat apa yang Anda bisa buat!

Saat Anda terus melanjutkan perjalanan Anda ke dunia pengembangan web, Anda akan menemukan bahwa sifat seperti min-block-size sangat berguna dalam peralatan CSS Anda. Mereka memungkinkan Anda untuk membuat desain fleksibel dan responsif yang terlihat bagus pada semua ukuran layar.

Tetap mengoding, tetap belajar, dan terutama, bersenang-senang! Sebelum Anda sadari, Anda akan menciptakan situs web yang menakjubkan yang dapat menyesuaikan diri secara indah ke semua ukuran layar. Selamat styling!

Credits: Image by storyset