Belajar Layout dengan Flex - Part 2
Apapun masalah layout, flex solusinya
Tech writer and lecturer from Indonesia who is passionate about backend technology.
I ensure that 99% of my content is written in Indonesian because I aim to encourage Indonesian tech enthusiasts to write and share their knowledge.
I often provide guidance to IT students in Indonesia, emphasizing the importance of continuous learning. Don't waste your post-campus life by doing nothing. Read, learn, and study more to become better professionals in the tech industry!
Overview
Pada bagian ini kita akan coba belajar layouting menggunakan Flex pada Tailwind. Flex sendiri merupakan istilah dasar dari Flexbox pada CSS.
Jadi sebenarnya flex ini adalah bagian dari Tailwind untuk mempermudah kita mendesain struktur dari komponen yang mana biasanya horizontal atau vertikal.
Pada Bootstrap kita mengenal istilah columns dan grid. Tentu saja, karena kita dengan mudah membuat baris dan kolom dengan kode berikut.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Mereka juga menggunakan flexbox untuk mempermudah pembuatan baris dan kolom, namun kita akan belajar menggunakan Tailwind untuk membuatnya.
Kick Off
Daripada banyak basa-basi langsung aja sekarang cobalah kode berikut, mau pake file yang sebelumnya juga boleh~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto p-4 border-2 border-black">
<div class="flex w-full">
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</body>
</html>
Kalau kamu jalankan maka hasilnya akan seperti ini.
Dapat kita lihat bahwa saya membuat semacam Card pada bootstrap dengan gaya Tailwind, ini tidak akan kita bahas secara detail, saya lebih fokus membantu teman-teman untuk membicarakan layouting.
Sekarang teman-teman gandakan box div yang berisi class flex dan flex-col menjadi beberapa baris, perhatikan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto p-4 border-2 border-black">
<div class="flex w-full">
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</body>
</html>
Maka hasilnya akan menjadi seperti ini:
Keren bukan? Tentu saja.
Apabila kita biasa menggunakan bootstrap, kita akan paham istilah 12 kolom. Artinya Dari kiri ke kanan ada 12 kolom, dan kita bisa pecah berdasarkan hitungan dasar matematika. Misalnya kita mau ada tiga komponen di dalamnya, berarti 12 dibagi 3, jadinya 4. Pada kode di atas saya menggunakan class w-4/12 artinya panjang dari komponen tersebut adalah 4 dari 12 atau 4 per 12.
Artinya, sama saja seperti bootstrap yang membagi tiga komponen di dalamnya dengan angka 4, kalau di bootstrap kita akan menggunakan class col-4.
Tapi ada yang janggal, coba deh kalian tambahin satu lagi class div tersebut.
Lah lah? Kita kan udah set 4/12 ya, kenapa kalo ada 4 malah ngikut kekanan? Harusnya kan kalau kita set 4/12 otomatis turun ya? Karena 4 dikali 3 kan 12.
Sekarang kita coba lagi untuk sedikit eksperimen, banyakin lagi div-nya.
Yang kamu dapat malah semuanya berbaris kaya penjual takjil ramadhan. Hal ini dikarenakan kita tidak menambahkan class flex-wrap pada div bagian atasnya.
Flex wrap digunakan untuk mengontrol jumlah item di dalamnya agar mengikuti (wrap) berdasarkan jumlah panjang lebar dari komponen tersebut.
Sekarang ubah kodenya agar menambahkan flex-wrap pada bagian atas seperti kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto p-4 border-2 border-black">
<div class="flex flex-wrap w-full">
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</body>
</html>
Viola, kita sudah berhasil membuatnya menyesuaikan lebar dari komponen tersebut.
Bedah Code
Sekarang saatnya kita bedah code biar kalian paham.
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold"> Hello World </h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
Berdasarkan kode di atas, kita menggunakan flex untuk membuat card. Nah untuk membuat card pada Tailwind, kita hanya perlu memanggil class shadow. Class shadownya pun banyak terdiri dari shadow (default), shadow-md, hingga shadow-lg . Class ini memiliki perbedaan pada hasil shadow, apabila semakin besar maka semakin besar pula shadownya, kamu bisa mengganti class shadow dengan shadow-lg apabila ingin membandingkannya. Baca docsnya disini.
Kemudian pada bagian w-4/12, seharusnya saya gak usah jelasin panjang lebar ya? Pada intinya, class w atau width sama saja seperti columns pada bootstrap. Bedanya width pada Tailwind lebih fleksibel dan tidak mempengaruhi kolom saja. Selain itu mengapa ini mempengaruhi kolom karena pada div di atas card ini kita menggunakan flex-wrap sehingga lebar dari masing-masing komponen di dalamnya ikut menyesuaikan. Baca docsnya disini.
Lalu kamu perhatikan, terdapat class flex-col pada div utama card yang dibangun. Class ini mempengaruhi bentuk isi dari komponen di dalamnya, sehingga apa yang membuat kita dapat menulis Hello World dan Lorem ipsum sir dolor amet di bawahnya adalah karena kita mengatur item di dalamnya menjadi berbentuk kolom dengan flex-col. Baca docsnya disini.
Pada bagian p-4 artinya padding 4px pada semua arah, saya rasa saya tidak perlu panjang lebar menjelaskan ini. Silahkan baca docsnya disini.
Pada bagian dalam juga saya tidak perlu jelaskan panjang lebar karena sudah kita bahas pada pertemuan sebelumnya.
Ngulik Sedikit
Justru yang akan menjadi pertanyaan adalah, bagaimana kalau misalnya kita ingin membuat sesuatu seperti ini?
Jawaban dari coret-coretannya adalah seperti ini:
Sekarang markilik, mari kita ngulik. Cobalah kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto p-4 border-2 border-black">
<div class="flex flex-wrap w-full">
<div class="flex flex-col w-3/12 shadow p-4 bg-red-100">
<i class="text-4xl bx bx-desktop"></i>
<h1 class="text-md font-semibold mt-5">Machine Learning</h1>
<p class="text-sm mt-3 text-gray-600 border-b border-gray-400 pb-3">4 December - 8 February</p>
<div class="flex flex-row">
<p class="flex text-sm mt-3 w-1/2 text-gray-500">Price</p>
<p class="flex text-sm font-semibold mt-3 w-1/2 justify-end">$1200</p>
</div>
</div>
</div>
</div>
</body>
</html>
Viola, inilah hasilnya!
Disini saya menggunakan boxicon sebagai icon CDN untuk menampilkan icon desktop.
<div class="flex flex-col w-3/12 shadow p-4 bg-red-100">
<i class="text-4xl bx bx-desktop"></i>
<h1 class="text-md font-semibold mt-5">Machine Learning</h1>
<p class="text-sm mt-3 text-gray-600 border-b border-gray-400 pb-3">4 December - 8 February</p>
<div class="flex flex-row">
<p class="flex text-sm mt-3 w-1/2 text-gray-500">Price</p>
<p class="flex text-sm font-semibold mt-3 w-1/2 justify-end">$1200</p>
</div>
</div>
Inilah bentuk card yang saya buat, sebenarnya hampir tidak jauh berbeda dengan pembelajaran kita sebelumnya. Bedanya kita memberikan background pink.
Bang bang, kok lu gak pake flex w-full seperti gambar yang lu rancang?
Err, gini temen-temen secara default disini kan kita sudha pakai flex <div class="flex flex-col w-3/12 shadow p-4 bg-red-100"> . Perlu diingat bahwa flex itu bisa responsive dan menyesuaikan ruang, dikarenakan hanya ada satu tag saja kemudian kita juga menggunakan flex-col artinya setiap tag akan mengisi satu ruang penuh, kalau kalian pernah ngoding android native mobile ada istilah wrap content dan match parent, nah disini kita menggunakan match parent.
Beda halnya ketika kita ingin memecah dua kolom seperti bagian bawah untuk price, kita perlu membuat tag dengan menggunakan class flex terlebih dahulu, lalu tambahkan class flex-row agar membuat menjadi baris horizontal. Di dalamnya, beri masing-masing tag dengan class flex.
Lho lho, kok yang ini di dalamnya malah pake flex? Yang atasnya nggak? Nggak ngerti saya.
Gini ges, kita kan mau mengatur tata letak supaya harga $1200 bisa ke kanan, kita perlu menggunakan flex. Kenapa? Karena secara default kita kan membagi dua bagian di dalamnya seperti ini:
Artinya, secara default angka $1200 berada pada sisi sebelah kiri. Kalau kamu gak percaya cobain aja hapus class justify-end. Fungsi class justify-end ini adalah memojokkan konten agar berada di tepi komponen, kalau kamu mau lebih paham baca docsnya disini.
Merapihkan Sisa
Ehiya balik lagi ke kodingan yang ini tadi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto p-4 border-2 border-black">
<div class="flex flex-wrap w-full">
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</body>
</html>
Ini kan berantakan ya? Dalam artian, mepet-mepet semua ges. Yaudah yuk kita perbaiki, kita mainin dunia per-paddingan pada komponennya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<div class="flex flex-wrap w-full p-3">
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Apa yang saya lakukan? Yes, perhatikan bagian ini:
<div class="p-3 w-4/12">
...
</div>
Saya melakukan membungkus card yang kita gunakan dengan padding, jadi yang awalnya seperti ini.
<div class="flex flex-col w-4/12 shadow p-4">
<h1 class="text-xl font-bold"> Hello World </h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
Menjadi seperti ini.
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold"> Hello World </h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
Kita bungkus isi card di dalam sebuah padding, tujuannya adalah agar menekan konten card agar masuk ke dalam. Sehingga kita dapat menjaga jarak antara satu komponen dengan komponen yang lain.
So, alih-alih kita berikan margin antar card, kenapa kita tidak tekan card ke dalam dengan padding?
Pada akhirnya, sama saja kok hasilnya, menurut saya lebih smooth dan tentunya tidak meribetkan kalian sebagai backend developer, ini yang paling penting 😀
