Pada petunjuk ini kita akan membahas mengenai modifikasi properti flex-shrink CSS. Opsi ini adalah bagian dari model Flexbox yang memungkinkan Anda membuat tata letak yang fleksibel yang dapat menyesuaikan dengan berbagai ukuran layar. Sementara pada video sebelumnya kita sudah membahas flex-grow, yang mengatur bagaimana elemen-elemen di Flex-Container dapat tumbuh, kali ini kita akan membahas tentang penyusutan elemen-elemen ketika ruang di Container lebih kecil dari ukuran flex-basis yang telah ditentukan. Dalam artikel ini, Anda akan belajar bagaimana menggunakan flex-shrink untuk membatasi atau menyesuaikan penyusutan elemen Flexbox dengan terarah.
Temuan Utama
- flex-shrink menentukan seberapa banyak elemen dapat menyusut jika ruang tidak mencukupi.
- Nilai standar untuk flex-shrink adalah 1, yang berarti elemen dapat mengambil ruang sesuai dengan ketersediaan ruang dan elemen-elemen lain yang didefinisikan di dalam Container.
- Anda dapat menggunakan flex-shrink untuk menetapkan rasio tertentu bagi penyusutan di antara beberapa elemen.
Panduan Langkah demi Langkah
Selanjutnya, saya akan menjelaskan langkah-langkah untuk mengoptimalkan flex-shrink. Setiap langkah akan saya sertakan dengan variabel tangkapan layar yang nantinya dapat Anda ganti dengan tangkapan layar yang sesuai dari video tersebut.
Pertama, Anda akan melihat aplikasi Flexbox dasar dalam CSS. Anda memiliki tiga elemen yang memiliki flex-basis sebesar 100 piksel. Jika ruang yang cukup tersedia dalam Flex Container, semuanya akan tetap seperti yang direncanakan.
Sekarang kita akan memperkecil tinggi Container menjadi 200 piksel. Dalam situasi ini, ruang yang diperlukan lebih besar dari tinggi Container. Elemen-elemen masih memiliki flex-basis sebesar 100 piksel dan karena itu tidak dapat menyusut, karena kita telah mengatur flex-shrink menjadi 0.
Untuk mengaktifkan mekanisme penyusutan, ubah nilai flex-shrink. Atur nilainya menjadi 1 untuk elemen nav. Dengan demikian, Anda memberitahu CSS bahwa elemen nav harus menyusut secara maksimal.
Sekarang simpan perubahan Anda, dan Anda akan melihat bahwa elemen nav menyusut proposional, hingga pada ketinggian minimum yang ditentukan oleh konten.
Jika Anda ingin semua elemen menyusut secara merata, atur flex-shrink untuk semua elemen menjadi 1. Jika Container menjadi lebih kecil dari ruang yang dibutuhkan, semua elemen akan menyusut sesuai.
Untuk menunjukkan bagaimana berbagai nilai flex-shrink mempengaruhi tata letak, pilih rasio seperti 1:1:2. Dalam kasus ini, elemen utama (main) akan mendapatkan bagian penyusutan terbesar, sementara elemen-elemen lain masing-masing mendapatkan bagian penyusutan yang lebih kecil.
Artinya, elemen main akan memiliki lebih banyak ruang atau membutuhkan lebih sedikit ruang ketika ruangnya terbatas daripada kedua elemen lainnya. Namun, jika Anda menginginkan penyesuaian tata letak yang konsisten, Anda juga dapat mengatur flex-shrink untuk semua elemen dengan nilai yang sama.
Terakhir, Anda dapat menggabungkan nilai flex-grow, flex-shrink, dan flex-basis bersama-sama, yang memberi Anda fleksibilitas lebih dalam merancang tata letak dalam CSS. Pastikan untuk selalu menyesuaikan elemen-elemen ini sesuai dengan kebutuhan desain Anda.
Ringkasan
Dalam tutorial ini Anda telah mempelajari cara menggunakan flex-shrink dalam CSS untuk mengontrol perubahan ukuran elemen Flexbox. Anda telah mengenal berbagai cara untuk menentukan penyusutan dan bagaimana hal tersebut mempengaruhi tata letak.
Pertanyaan yang Sering Diajukan
Bagaimana cara kerja flex-shrink?flex-shrink menentukan seberapa banyak elemen dapat menyusut jika ruang yang tersedia lebih kecil dari flex-basis.
Nilai standar untuk flex-shrink?Nilai standar flex-shrink adalah 1, yang berarti semua elemen menyusut secara merata.
Bagaimana cara mengatur flex-shrink untuk beberapa elemen?Dengan memberikan nilai flex-shrink yang sama untuk semua elemen, penyusutan akan terdistribusi merata.
Apa yang terjadi jika flex-shrink diatur ke 0?Jika flex-shrink diatur ke 0, elemen-elemen tidak akan menyusut, bahkan jika Container lebih kecil daripada total flex-basis.
