Cara Membuat Responsive Layout menggunakan Flexbox

Dalam proses pembuatanya, kita akan mencoba teknik baru dalam penyusunan layout, yakni menggunakan Flexbox. Teknik ini hadir pada CSS3 dan menjadi salah satu pendekatan populer dalam penyusunan layout yang responsif. Nantinya kalkulator yang kita kembangkan ini dapat digunakan dengan baik pada mobile device.


Box Model

Jadi apa sebenarnya itu flexbox atau flexible box model? Pada dasarnya flexbox merupakan mode layout yang mudah dan praktis untuk mengatur elemen dengan menggunakan sebuah container.
Sebelumnya kita sudah menggunakan teknik float dalam penyusunan layout. Float memang cukup mudah dipahami tetapi tak cukup praktis untuk digunakan. Passalnya, kita memerlukan pengukuran dimensi yang tepat agar elemen berada posisi yang diinginkan.
Dengan Flexbox kita dapat mengatur ukuran secara otomatis dan mampu beradaptasi dengan ukuran container-nya. Dengan kemampuan flexibelnya, tampilan layout yang disusun menggunakan flexbox menjadi mobile-friendly. Selain itu, flexbox dapat dikombinasikan dengan media query, sehingga ia dapat lebih optimal lagi digunakan pada peranti mobile.
Berikut beberapa konsep dari flexbox yang perlu kita ketahui:
  • Dapat mengubah ukuran dimensi elemen dengan menyesuaikan ukuran yang cocok bagi ruang kosong yang ada pada container-nya.
  • Flexbox is directional agnostic. ini berbeda dengan konsep block model di mana elemen selalu ditampilkan secara vertikal dengan membuat baris baru. Ini berbeda pula dengan konsep inline model di mana elemen selalu ditampilkan secara horizontal. Dengan flexbox kita dapat melakukan kedua hal tersebut dengan mudah.
  • Dibuat untuk menyusun layout yang mobile friendly.

Flex Container

Flex container merupakan sebuah elemen yang menampung beberapa flex item. Karena Parent-child merupakan relasi yang wajib ada dalam penerapan flexbox, maka setiap flex item harus merupakan anak / child dari flex container.
201912061348329ce0609d7130985d90a3ab0c012bf0ef.png
Secara default deretan flex-item pada container ditampilkan secara horizontal. Ketika menggunakan flex, kita tidak perlu mengatur dimensi dari tiap flex item secara manual untuk mengisi ruang kosong pada container. Sebelum ada flexbox, hal ini jadi kendala umum. Alih-alih, kita harus melakukan perhitungan yang tepat agar tak terjadi overflow pada layout yang ditampilkan.
Untuk membuat sebuah flex container kita gunakan properti display dengan nilai flex. Dengan demikian seluruh anak dari container tersebut akan menjadi flex item. Berikut contoh penerapan flexbox untuk membuat tampilan seperti gambar di atas:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    <style>
  5.        .container {
  6.            display: flex;
  7.  
  8.            /* Properti lainnya */
  9.            width: 800px;
  10.            height: 250px;
  11.            background-color: #11C5C6;
  12.            border: 2px solid black;
  13.            padding: 20px;
  14.            border-radius: 10px;
  15.            margin: 0 auto;
  16.        }
  17.        .box {
  18.            flex-grow: 1;
  19.  
  20.            /* properti lainnya */
  21.            background-color: #FBDD1C;
  22.            margin: 5px;
  23.            border: 2px solid black;
  24.            border-radius: 10px;
  25.        }
  26.    </style>
  27. </head>
  28. <body>
  29. <div class="container">
  30.    <div class="box"></div>
  31.    <div class="box"></div>
  32.    <div class="box"></div>
  33. </div>
  34. </body>
  35. </html>


Output dari kode di atas adalah:
201912061351449ce5a66a4a3c1ce764e64210e7ff4ca8.png

Flex Grow

Bisa kita lihat seluruh box di dalam container dapat menyesuaikan ukurannya sesuai ruang kosong yang ada pada container. Pada box, kita tidak menetapkan nilai dimensi seperti width dan height. Kita cukup menggunakan satu properti yakni flex-grow: 1;.
Properti flex-grow ini digunakan untuk memberitahu berapa banyak ukuran yang harus ditetapkan oleh flex-item. Nilai dari properti ini bukan nilai dari dimensi asli pada flex item, melainkan nilai yang relatif terhadap ruang kosong pada flex container.
Jika kita menetapkan nilai yang sama pada seluruh flex item, maka dimensi dari tiap flex item akan sama rata dan memenuhi ruang kosong yang ada pada container. Namun jika kita memberikan nilai yang berbeda dari salah satu itemnya, contohnya nilai yang lebih besar, maka flex item tersebut akan mencakup ukuran yang lebih besar. Flex item yang lain akan menyusut menyesuaikan agar tetap masuk pada ruang flex container. Contohnya seperti berikut:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    <style>
  5.        .container {
  6.            display: flex;
  7.  
  8.            /* Properti lainnya */
  9.            width: 800px;
  10.            height: 250px;
  11.            background-color: #11C5C6;
  12.            border: 2px solid black;
  13.            padding: 20px;
  14.            border-radius: 10px;
  15.            margin: 0 auto;
  16.        }
  17.        .box {
  18.            /* properti lainnya */
  19.            background-color: #FBDD1C;
  20.            margin: 5px;
  21.            border: 2px solid black;
  22.            border-radius: 10px;
  23.        }
  24.  
  25.        .first {
  26.            flex-grow: 1;
  27.        }
  28.        .second {
  29.            flex-grow: 2;
  30.        }
  31.  
  32.        .third {
  33.            flex-grow: 1;
  34.        }
  35.    </style>
  36. </head>
  37. <body>
  38. <div class="container">
  39.    <div class="box first"></div>
  40.    <div class="box second"></div>
  41.    <div class="box third"></div>
  42. </div>
  43. </body>
  44. </html>

20191206135424989884835963e101aa8b4a839a024ba1.png

Cara kerja flex-grow mirip seperti potongan kue. Ruang kosong pada elemen akan dibagi-bagi sesuai besaran nilainya. Contoh di atas memberi kita gambaran seperti sebuah kue dengan luas total 4, kemudian kue tersebut dipotong menjadi 3 potong. Potongan yang tengah mendapatkan 2 bagian dan potongan yang lainnya masing - masing mendapatkan 1 bagian. Maka potongan yang tengah akan lebih besar dari potongan yang lain.
Betapa fleksibelnya bukan? Yang harus kita ingat, ketika kita mengubah ukuran dari suatu flex item, maka flex item yang lain pun akan terpengaruh

Flex Direction

Seperti yang sudah kita ketahui sebelumnya, Flexbox merupakan directional agnostic, di mana kita dapat mengubah arah flex-item ditempatkan pada container. Secara default deretan flex-item ditampilkan secara horizontal, namun kita dapat mengubahnya dengan menetapkan properti flex-direction pada container-nya.
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    <style>
  5.        .container {
  6.            display: flex;
  7.            flex-direction: column;
  8.  
  9.            /* Properti lainnya */
  10.            width: 800px;
  11.            height: 250px;
  12.            background-color: #11C5C6;
  13.            border: 2px solid black;
  14.            padding: 20px;
  15.            border-radius: 10px;
  16.            margin: 0 auto;
  17.        }
  18.        .box {
  19.            /* properti lainnya */
  20.            background-color: #FBDD1C;
  21.            margin: 5px;
  22.            border: 2px solid black;
  23.            border-radius: 10px;
  24.        }
  25.  
  26.        .first {
  27.            flex-grow: 3;
  28.        }
  29.        .second {
  30.            flex-grow: 2;
  31.        }
  32.  
  33.        .third {
  34.            flex-grow: 1;
  35.        }
  36.    </style>
  37. </head>
  38. <body>
  39. <div class="container">
  40.    <div class="box first"></div>
  41.    <div class="box second"></div>
  42.    <div class="box third"></div>
  43. </div>
  44. </body>
  45. </html>


Output dari kode di atas adalah:
201912061431075bb53b4effe0d00fb6fe38bd12aa1052.png
Ada empat nilai yang bisa digunakan untuk properti flex-direction, antara lain:
  • row : merupakan nilai default, di mana deretan flex-item pada container ditampilkan secara horizontal.
  • row-reverse : memiliki sifat yang sama seperti row, namun urutan flex item-nya ditukar.
  • column : Deretan flex-item pada container ditampilkan secara vertikal.
  • column-reverse : memiliki sifat yang sama seperti column, namun urutan flex item-nya ditukar.

Karena properti flex-direction ini, kita dapat membuat dua dimensional layout dengan menempatkan flex container di dalam flex container, dalam arti lain sebuah flex container dapat memiliki child berupa flex container lain.
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    <style>
  5.        .flex-column {
  6.            display: flex;
  7.            flex-direction: column;
  8.  
  9.            /* properti lainnya */
  10.            width: 800px;
  11.            height: 300px;
  12.            padding: 20px;
  13.            margin: 0 auto;
  14.            border: 2px solid black;
  15.            border-radius: 10px;
  16.            background-color: #11C5C6;
  17.        }
  18.  
  19.        .flex-row {
  20.            display: flex;
  21.            flex-direction: row;
  22.            flex-grow: 1;
  23.  
  24.            /* properti lainnya */
  25.            padding: 20px;
  26.            margin: 5px;
  27.            background-color: #FBDD1C;
  28.            border: 2px solid black;
  29.            border-radius: 10px;
  30.        }
  31.  
  32.        .box {
  33.            flex-grow: 1;
  34.  
  35.            /* properti lainnya */
  36.            margin: 5px;
  37.            border: 2px solid black;
  38.            border-radius: 10px;
  39.            background-color: #fe899a;
  40.        }
  41.    </style>
  42. </head>
  43. <body>
  44. <div class="flex-column">
  45.    <div class="flex-row">
  46.        <div class="box"></div>
  47.        <div class="box"></div>
  48.        <div class="box"></div>
  49.    </div>
  50.    <div class="flex-row">
  51.        <div class="box"></div>
  52.        <div class="box"></div>
  53.        <div class="box"></div>
  54.    </div>
  55. </div>
  56. </body>
  57. </html>


Output dari kode di atas adalah:
201912061444303c458a92e2dc998dd415d719fdba91e7.png

Flex Basis

Selain menggunakan flex-grow, untuk menentukan ukuran flex item, kita bisa gunakan properti flex-basis. Properti ini mirip seperti width dalam menentukan dimensi box. Kita bisa menggunakan nilai satuan tetap seperti px, pt, pc, cm dll, atau kita juga bisa menggunakan satuan persentase %.
Flex-grow ini digunakan ketika kita ingin menetapkan ukuran awal pada sebuah flex-item. Alhasil, kita dapat mengatur ukuran dengan lebih leluasa. Flex-grow biasa digunakan ketika kita menerapkan nested flex-container dan terdapat perbedaan jumlah child pada container-nya. Untuk lebih mudah menggambarkannya, perhatikan contoh berikut:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    <style>
  5.        * {
  6.            box-sizing: border-box;
  7.        }
  8.        .container {
  9.            width: 800px;
  10.            border: 2px solid black;
  11.            margin: 0 auto;
  12.        }
  13.  
  14.        .flex-column {
  15.            display: flex;
  16.            flex-direction: column;
  17.        }
  18.  
  19.        .flex-row {
  20.            display: flex;
  21.            flex-direction: row;
  22.            flex-grow: 1;
  23.        }
  24.  
  25.        .box {
  26.            flex-grow: 1;
  27.            background-color: cornflowerblue;
  28.            border: 2px solid black;
  29.            padding: 40px;
  30.            text-align: center;
  31.            color: white;
  32.            font-size: 1.5em;
  33.        }
  34.    </style>
  35. </head>
  36. <body>
  37. <div class="container">
  38.    <div class="flex-column">
  39.        <div class="flex-row">
  40.            <div class="box">1</div>
  41.            <div class="box">2</div>
  42.            <div class="box">3</div>
  43.            <div class="box">4</div>
  44.        </div>
  45.        <div class="flex-row">
  46.            <div class="box">5</div>
  47.            <div class="box">6</div>
  48.            <div class="box">7</div>
  49.        </div>
  50.    </div>
  51. </div>
  52. </body>
  53. </html>

Output dari kode di atas adalah:
20191206144921f95c0b125f43f78ad34c07608923f6dd.jpeg
Pada contoh di atas kita memiliki satu buah flex-container column yang di dalamnya terdapat dua buah flex-container row. Kemudian flex-container row yang pertama memiliki empat buah flex-item, dan yang kedua memiliki tiga buah flex-item.
Standarnya ketika kita menggunakan nilai flex-grow: 1 pada seluruh flex-item yang ada, maka tampilan akan seperti gambar di atas. Namun bagaimana jika kita ingin mengatur flex-item di row kedua dengan tampilan berbeda seperti di bawah ini?
20191206144958012c203371189d71dc88d844acada7a7.png

Jika kita menggunakan flex-grow, mungkin kita dapat memberikan nilai flex-grow: 2 pada box ke tujuh.

  1. ....

  2. <div class="box double">7</div>

  3. ...



  1. .....

  2. .double {

  3.    flex-grow: 2;

  4. }



Namun hasilnya akan tampak seperti ini:
2019120615082741b7bc150e43bc73fc76b5e6577d9f18.png
Sebabya, properti flex-grow tidak menjamin elemen yang menerapkan nilai 2 akan lebih besar 2 kali lipat dari nilai 1.

201912061508573098ceadafbfa2668b99a2c65f665e1f.gif
Flex-grow akan mencari nilai yang sesuai yang dapat dibagi pada flex-items. Agak terdengar aneh, bukan? Nah, temukan artikel yang cukup menarik yang membahas permasalahan ini pada tautan berikut.
Sebenarnya bisa saja kita menggunakan flex-grow untuk mendapatkan hasil yang diinginkan namun kita harus mencari nilai yang pas secara manual. Ini tentunya akan memakan waktu lebih.
Pada kasus seperti ini, solusinya adalah menggunakan properti flex-basis. Dengan properti ini kita dapat asumsikan bahwa total ruang kosong pada flex-container adalah 100%. Jika dibagi rata terhadap empat buah flex-item, maka tiap itemnya harus memiliki nilai 25%.
  1. doctype html>
  2. <html lang="en">
  3. <head>
  4.    <style>
  5.        * {
  6.            box-sizing: border-box;
  7.        }
  8.  
  9.        .container {
  10.            width: 800px;
  11.            border: 2px solid black;
  12.            margin: 0 auto;
  13.        }
  14.  
  15.        .flex-column {
  16.            display: flex;
  17.            flex-direction: column;
  18.        }
  19.  
  20.        .flex-row {
  21.            display: flex;
  22.            flex-direction: row;
  23.            flex-grow: 1;
  24.        }
  25.  
  26.        .box {
  27.            flex-basis: 25%;
  28.            background-color: cornflowerblue;
  29.            border: 2px solid black;
  30.            padding: 40px;
  31.            text-align: center;
  32.            color: white;
  33.            font-size: 1.5em;
  34.        }
  35.    </style>
  36. </head>
  37. <body>
  38. <div class="container">
  39.    <div class="flex-column">
  40.        <div class="flex-row">
  41.            <div class="box">1</div>
  42.            <div class="box">2</div>
  43.            <div class="box">3</div>
  44.            <div class="box">4</div>
  45.        </div>
  46.        <div class="flex-row">
  47.            <div class="box">5</div>
  48.            <div class="box">6</div>
  49.            <div class="box">7</div>
  50.        </div>
  51.    </div>
  52. </div>
  53. </body>
  54. </html>

Output kode di atas adalah:
201912061511374fc41f7e3a9cdb8404caa2fbfdfbc093.png
Maka seluruh flex-items akan memiliki ukuran yang sama. Tetapi pada flex-container baris kedua terdapat 25% ruang bebas, karena jumlah flex-itemnya hanya tiga. Kita bisa menggunakan ruang kosong tersebut untuk membuat box tujuh lebih besar dua kali lipat dengan menggunakan nilai flex-basis: 50%;

  1. ....

  2. <div class="box double">7</div>

  3. ...



  1. .....

  2. .double {

  3.    flex-basis: 50%;

  4. }


20191206151308b20c5e2939f8fb44cdb3af158486f903.png

Komentar

Posting Komentar