Selamat Datang kembali di website tips dan trik Dumet School, pada artikel kali ini kita akan mengenal Penjelasan Tentang Flex-Shrink CSS di artikel sebelumnya kita sudah membahas Penjelasan Tentang Flexbox Pada CSS dimana kita mengenal yang namanya flex-grow yang berfungsi untuk memperbesar ukuran sesuai pembungkusnya.

Nah kali ini kita akan mengenal yang namanya flex-shrink, fungsi ini kebalikannya dari flex-grow. Jika flex-grow memperbasr ukuannya maka flex-shrink ini memperkecil ukurannya. Jadi semakin kita besarkan nilainya maka akan semakin kecil ukurannya. Baik langsung saja kita buat script nya seperti di bawah ini

<div id="row">
  <div style="background:gray;"></div>
  <div style="background:pink;"></div>
  <div style="background:tomato;"></div>
</div>

Kemudian kita berikan css nya seperti di bawah ini

#row {
    width: 500px;
    height: 100px;
    display: flex;
}
#row > div{
    width: 100px;
}

Dimana pada pembungkusnya yaitu #row kita berikan display flex, kemudian div yang ada pada #row kita berikan flex-shrink

#row div:nth-of-type(1) {flex-shrink: 1;}
#row div:nth-of-type(2) {flex-shrink: 2;}
#row div:nth-of-type(3) {flex-shrink: 3;}

Maka jika buka pada browsernya akan tampil seperti gambar di bawah ini

Penjelasan Tentang Flex-Shrink CSS

Bisa teman – teman lihat, terlihat kotaknya tidak ada bedanya dari kotak lainnya. Tetapi jika kita buka pada divice yang terkecil  akan terlihat

Penjelasan Tentang Flex-Shrink CSS

Kotak yang kita berikan flex-shrink:3 maka kotak akan menjadi yang terkecil, berbeda dengan flex-grow semakin kita memberikan nilai besar maka semakin besar juga ukurannya. Kemudian ada 1 lagi yang namanya flex-basis, flex-basis ini sama seperti kita memberikan ukuran lebarnya. Seperti css di bawah ini

#row > div{
    width: 100px;
}

Kita bisa mengganti dengan script di bawah ini

#row > div{
    flex-basis:100px
}

Maka hasilnya sama kalau kita memberikan width:100px jadi di dalam flex dari 3 fungsi ini (flex-grow,flex-shrink,flex-basis) kita dapat menggabungkan menjadi flex:1 1 100px.

Nah untuk penggunaanya teman – teman bisa kunjungi artikel Cara Membuat Layout Website Dengan Flexbox CSS untuk pemakaian flex-grow, flex-shrink dan flex-basis. Untuk membuat sebuah layout secara responsive, teman – teman bisa coba membuatnya dengan konsepnya bootstap. Yaitu menggunakan class container, row dan juga col. Baik itulah penjelasan mengenai flex css, mudah – mudahan dapat membantu teman – teman dalam mempelajari flex css. Sekian artikel kali ini tentang Penjelasan Tentang Flex-Shrink CSS tentu kita jumpa kembali pada artikel selanjutnya. Terimakasih dan sampai jumpa.