Penjelasan Tentang Flexbox Pada CSS

Halo teman – teman selamat datang kembali di situs tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya di pembahasan seputar dunia situs. Di kesempatan kali ini kita akan membahas mengenai Penjelasan Tentang Flexbox Pada CSS dimana flex di pada css artinya flexible dan kita letakkan di selector, id atau class pembungkus supaya menjadikan content atau isi di dalamnya flexible di devicenya.

Kemudian selain flex ada yang namanya flex-grow yang kita letakkan di setiap kolomnya, semakin besar value kita ini karenanya akan semakin besar ukurannya,nah seketika saja kita coba supaya tak bingung

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

Kita mempunyai id=”row” selaku pembungkus dari 3 div yang di dalamnya kita berikan background yang berbeda, karenanya kita berikan di #row di css display flex

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

Kemudian kita berikan masing div yang terdapat di pada #row dengan nilai yang berbeda

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

Karenanya hasilnya seperti gambar di bawah ini

Perhatikan dari div 1 hingga 3, dengan adanya 3 div di pada #row yang kita berikan flex-grow dengan nilai yang berbeda, perhatikan kotak berwarna gray terlihat sangat kecil yang kita berikan flex-grow:1 kemudian bandingkan dengan kotak berwarnya pink 2 kali lipat lebih besar dari kotak yang berwarna gray. Seperti itu pun kota yang berwarna tomato, 3 kali lipat lebih besar dari kotak berwarna gray. Kesimpulannya ialah flex-grow ini akan membagi kolom supaya menyesuaikan dari pembungkusnya, apabila kita tambahkan lagi div di pada #row karenanya dengan otomatis menyesuaikan kolomnya

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

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

Karenanya hasilnya seperti gambar di bawah ini

Bagaimana, kira – kira telah paham belum 🙂

Bagi lanjutannya teman – teman dapat kunjungi artikel ini Cara Membuat Layout Website Dengan Flexbox CSS bagi pemakaian flex-grow nya.di pada flex

Bagus, demikian di artikel kali ini mengenai Penjelasan Tentang Flexbox Pada CSS kita jumpa lagi di artikel berikutnya, dan kita akan membahas flex-shrink di flexbox css. Terimakasih dan hingga jumpa.

Sumber https://kursuswebsite.org