Menggunakan Flex Grow dan Flex Shrink

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.

28 Oktober 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat