Penjelasan Tentang Flex-Shrink CSS

Selamat Datang kembali di situs tips dan trik Source Code Aplikasi, di artikel kali ini kita akan mengenal Penjelasan Tentang Flex-Shrink CSS di artikel sebelumnya kita telah membahas Penjelasan Tentang Flexbox Pada CSS dimana kita mengenal yang namanya flex-grow yang berfungsi bagi memperbesar ukuran sesuai pembungkusnya.

Nah kali ini kita akan mengenal yang namanya flex-shrink, manfaat ini kebalikannya dari flex-grow. Apabila flex-grow memperbasr ukuannya karenanya flex-shrink ini memperkecil ukurannya. Jadi semakin kita besarkan nilainya karenanya akan semakin kecil ukurannya. Bagus seketika saja kita bikin 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 di pembungkusnya yaitu #row kita berikan display flex, kemudian div yang terdapat di #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;}

Karenanya kalau buka di browsernya akan tampil seperti gambar di bawah ini

Dapat teman – teman lihat, terlihat kotaknya tak ada bedanya dari kotak lainnya. Tetapi kalau kita buka di divice yang terkecil  akan terlihat

Kotak yang kita berikan flex-shrink:3 karenanya kotak akan menjadi yang terkecil, berbeda dengan flex-grow semakin kita memberikan nilai besar karenanya semakin besar pun 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 dapat mengganti dengan script di bawah ini

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

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

Nah bagi penggunaanya teman – teman dapat kunjungi artikel Cara Membuat Layout Website Dengan Flexbox CSS bagi pemakaian flex-grow, flex-shrink dan flex-basis. Bagi membangun sebuah layout secara memiliki tampilan yang dinamis, teman – teman dapat coba membuatnya dengan konsepnya bootstap. Yaitu menggunakan class container, row dan pun col. Bagus demikianlah penjelasan mengenai flex css, gampang – mudahan dapat menolong teman – teman pada mempelajari flex css. Sekianlah artikel kali ini mengenai Penjelasan Tentang Flex-Shrink CSS tentu kita jumpa kembali di artikel berikutnya. Terimakasih dan hingga jumpa.

Sumber https://kursuswebsite.org