Skip to main content

B.7.1.11. Flex Shrink

Pada chapter ini kita akan membahas mengenai flex-shrink. Properti flex-shrink dalam CSS mendefinisikan kemampuan flex-item untuk menyusut menyesuaikan ruang yang tersedia di dalam container. Nilai default dari properti ini adalah 1, yang berarti item tersebut dapat menyusut untuk mengakomodasi ruang tersedia.

Coba teman-teman perhatikan kode berikut:

<div class="flex-container">
  <div class="flex-item">Item-1</div>
  <div class="flex-item">Item-2</div>
  <div class="flex-item">Item-3</div>
</div>

Hasil dari kode di atas kurang lebih akan terlihat seperti:

Output

Bisa teman-teman lihat item 1-3 sekarang memiliki lebar dan tinggi yang sama. Perilaku flex-shrink dan flex-grow sangat berbeda, dimana pada flex-grow semakin nilai yang di berikan maka akan semakin besar pula pertumbuhan elemen nya.

Pada flex-shrink, semakin besar nilai yang di beri maka akan semakin menyusut elemenya. Seperti yang teman-teman tahu properti flex-shrink memiliki nilai bawaan 1, nah sekarang kita akan coba ubah penyusutan pada item-2.

.flex-container {
  /*......*/
}

.flex-item {
  /*......*/
}

.flex-item:nth-child(2) {
  flex-shrink: 1.2;
}

Maka hasilnya akan terlihat seperti:

Output

Sekarang item-2 akan lebih menyusut jika di bandingkan dengan item 1-3. Lalu, apa yang terjadi jika kita buat item-2 menjadi tidak menyusut atau flex-shrink:0;?

.flex-container {
  /*......*/
}

.flex-item {
  /*......*/
}

.flex-item:nth-child(2) {
  flex-shrink: 0;
}

Maka hasilnya akan terlihat seperti:

Output

Nah jika kita set flex-shrink pada item-2 menjadi 0, maka item-2 tidak akan mengalami penyusutan sama sekali. Dalam artian, item-2 memiliki lebar 100% sesuai dengan lebar asli dari _parent container-_nya.

info

Source code pada chapter ini tersedia di GitHub:
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.7-css-layouting/B.7.1-flexbox/B.7.1.11-flex-shrink