Menggunakan Flex Grow dan Flex Shrink

28/10/2018    Maykhel David    4577    Website

Menggunakan Flex Grow dan Flex Shrink - Hallo kali ini saya akan mengajak kalian beralih ke konsep kolom modern, jika pada tahun 2006 kita menggunakan table saat ingin membagi kolom, lalu pada tahun 2010 kita sudah dikenalkan dengan css float, sekitar tahun 2015 terdapat metode baru dari css yang berfungsi untuk membagi jumlah kolom pada layout html

Konsep terbaru yang kita perlu pelajari saat ini adalah Flexbox, apa itu flexbox? Flexbox adalah sistem layouting terbaru dari css yang memungkinkan kita mengelola layout dengan cara yang sangat fleksibel.

Baiklah kali ini kita akan coba berkenalan dengan dua property sederhana pada checkbox, yaitu flex-grow dan flex shrink

Flex-grow adalah properti yang menentukan berapa banyak item akan membesar relatif terhadap sisa item fleksibel di dalam container yang sama.

<style type="text/css">
#main div:nth-of-type(1) {flex-grow: 1 ;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

pada baris kode diata akan terlihat bahwa elemen kedua berwarna lightblue akan menjadi lebih besar dibandingkan yang lainnya

Flex-shrink adalah properti yang menentukan berapa banyak item akan mengecil relatif terhadap sisa item fleksibel di dalam container yang sama.

<style>
#main div:nth-of-type(2) {
    flex-shrink: 3;
}
</style>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

pada elemen diatas akan terlihat elemen kedua warna lightblue akan menjadi lebih kecil dibanding yang lainnya

baiklah teman - teman, demikian artikel kali ini yang membahas tentangcara menggunakan flex-grow dan flex-shrink.

No data.