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:
- index.html
- style.css
<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>
.flex-container {
display: flex;
height: 300px;
border: 1px solid black;
}
.flex-item {
margin: 1rem;
width: 100%;
background-color: #36ac5792;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
Hasil dari kode di atas kurang lebih akan terlihat seperti:
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:
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:
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.
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
Mmm apakah halaman ini membantuš¤?
Ayo share tentang pengalaman belajarmu!