CSS - properti max-inline-size: Panduan untuk Pemula

Halo teman-teman, para ahli CSS masa depan! Hari ini, kita akan melihat dunia yang menarik dari properti max-inline-size. Jangan khawatir jika Anda baru belajar ini; saya akan menjadi panduan ramah Anda dalam petualangan CSS ini. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!

Apa itu max-inline-size?

Sebelum kita masuk ke detail, mari pahami apa itu max-inline-size. Bayangkan Anda mencoba memasukkan kata yang sangat panjang ke dalam kotak kecil. Itu seperti apa yang max-inline-size membantu kita lakukan dalam CSS. Properti ini menentukan ukuran maksimum elemen dalam arah inline.

"Tunggu dulu," Anda mungkin bertanya, "apa itu arah inline?" Pertanyaan bagus! Dalam bahasa Inggris dan banyak bahasa lainnya, arah inline adalah horizontal - dari kiri ke kanan. Namun, dalam beberapa bahasa seperti Arab atau Ibrani, itu dari kanan ke kiri. Dan dalam mode tulisan vertikal, itu bahkan bisa dari atas ke bawah!

Nilai yang Mungkin

Sekarang, mari kita lihat nilai yang berbeda yang bisa kita gunakan dengan max-inline-size. Ini adalah tabel yang praktis untuk Anda:

Nilai	Deskripsi
<length>	Panjang tetap seperti 300px atau 20em
<percentage>	Persentase ukuran blok pengontrol
none	Tidak ada batas ukuran (ini adalah default)
max-content	Ukuran preferensi intrinsik
min-content	Ukuran minimum intrinsik
fit-content	Menggunakan ruang yang tersedia, tapi tidak kurang dari min-content dan tidak lebih dari max-content

Jangan khawatir jika beberapa nilai ini terlihat membingungkan sekarang. Kita akan menjelajahi masing-masing dengan contoh!

Teraplikasi Pada

Properti max-inline-size berlaku untuk semua elemen kecuali:

• Elemen inline non-replaced
• Baris tabel
• Grup baris

Sintaks

Sintaks dasar untuk max-inline-size cukup sederhana:

max-inline-size: nilai;

Mudah-mudahan, kan? Sekarang, mari kita masuk ke beberapa contoh khusus!

CSS max-inline-size - Nilai

mari mulai dengan contoh sederhana menggunakan panjang tetap:

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Ini adalah kotak dengan max-inline-size diatur ke 300px. Isi akan lipat jika melebihi lebar ini.
</div>

Dalam contoh ini, kita telah mengatur max-inline-size ke 300 pixel. Ini berarti bahwa tidak peduli berapa banyak konten yang kita masukkan ke dalam .box, itu tidak akan melampaui 300px dalam arah inline (yang horizontal dalam kasus ini). Jika konten terlalu panjang, itu akan lipat ke baris berikutnya.

CSS max-inline-size - Nilai

Sekarang, mari coba nilai persentase:

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
Kotak ini memiliki max-inline-size diatur ke 50% dari lebar pengontrolnya.
</div>
</div>

Dalam kasus ini, .box akan memiliki ukuran inline maksimum sebesar 50% dari lebar pengontrolnya. Jadi, jika pengontrolnya 500px lebar, kotak itu tidak akan melebihi 250px lebar.

CSS max-inline-size - Nilai

Nilai max-content sangat menarik. Itu menetapkan ukuran inline maksimum ke ukuran preferensi intrinsik konten. mari lihatnya dalam aksi:

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
Kotak ini akan diperluas untuk memuat semua kontennya, tapi hanya akan lipat jika dipaksa.
</div>

Dengan max-content, kotak akan diperluas untuk memuat semua kontennya di satu baris, hanya lipat jika dipaksa (seperti jika mencapai tepi viewport).

CSS max-inline-size - Dengan Teks Vertikal

Sekarang, mari kita lihat bagaimana max-inline-size bekerja dengan teks vertikal:

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
Teks ini vertikal, dan max-inline-size membatasi tingginya!
</div>

Dalam contoh ini, kita telah menggunakan writing-mode: vertical-rl untuk membuat teks vertikal dan kanan ke kiri. Sekarang, max-inline-size sebenarnya membatasi tinggi kotak, karena dalam mode tulisan vertikal, arah inline adalah vertikal!

Penutup

Dan itu adalah nya, teman-teman! Kita telah menjelajahi properti max-inline-size dari atas ke bawah (atau seharusnya, dari awal inline ke akhir inline?). Ingat, CSS adalah tentang eksperimen. Jangan khawatir untuk mencoba properti ini dan lihat apa yang terjadi. Itu adalah cara kita semua belajar!

Sebelum saya membiarkan Anda pergi, ini adalah一个小笑话 untuk mengingat max-inline-size: Mengapa properti CSS pergi ke gym? Untuk meningkatkan max-inline-size nya, tentu saja!

Selamat coding, dan semoga tata letak Anda selalu fleksibel dan konten Anda selalu pas!

Credits: Image by storyset