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

Kemudian selain flex ada yang namanya flex-grow yang kita letakkan pada setiap kolomnya, semakin besar value kita ini maka akan semakin besar ukurannya,nah langsung saja kita coba supaya tidak bingung

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

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

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

Kemudian kita berikan masing div yang ada di dalam #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;}

Maka hasilnya seperti gambar di bawah ini

Penjelasan Tentang Flexbox Pada CSS

Perhatikan dari div 1 sampai 3, dengan adanya 3 div di dalam #row yang kita berikan flex-grow dengan nilai yang berbeda, perhatikan kotak berwarna gray terlihat paling kecil yang kita berikan flex-grow:1 kemudian bandingkan dengan kotak berwarnya pink 2 kali lipat lebih besar dari kotak yang berwarna gray. Begitu juga kota yang berwarna tomato, 3 kali lipat lebih besar dari kotak berwarna gray. Kesimpulannya adalah flex-grow ini akan membagi kolom supaya menyesuaikan dari pembungkusnya, jika kita tambahkan lagi div di dalam #row maka 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;}

Maka hasilnya seperti gambar di bawah ini

Penjelasan Tentang Flexbox Pada CSS

Bagaimana, kira – kira sudah paham belum 🙂

Untuk lanjutannya teman – teman bisa kunjungi artikel ini Cara Membuat Layout Website Dengan Flexbox CSS untuk penggunaan flex-grow nya.di dalam flex

Baik, sekian pada artikel kali ini tentang Penjelasan Tentang Flexbox Pada CSS kita jumpa lagi pada artikel selanjutnya, dan kita akan membahas flex-shrink pada flexbox css. Terimakasih dan sampai jumpa.