Halo teman-teman semuanya, setelah kita membahas tentang warna, background, dan border di Tailwind CSS, sekarang kita akan belajar bagaimana menyusun layout yang fleksibel dan responsif menggunakan Flexbox.
Dengan pendekatan utility-first, Tailwind CSS menyediakan utility class khusus yang sangat memudahkan kita dalam mengatur layout berbasis flexbox. Kita bisa menyusun elemen secara horizontal, vertikal, membuat space-between, menyusun ke tengah, dan lain sebagainya hanya dengan class yang singkat dan jelas.
1. Mengaktifkan Flex Container
Untuk mengaktifkan mode flex, kita cukup menambahkan class flex pada elemen kontainer.
| Class |
Fungsi |
flex |
Mengaktifkan elemen sebagai flex container |
Contoh:
<div class="flex">
<div class="bg-blue-500 text-white p-4 mr-2">Box 1</div>
<div class="bg-green-500 text-white p-4">Box 2</div>
</div>
2. Arah Flex (Flex Direction)
Kita bisa menentukan arah susunan elemen, apakah horizontal (default) atau vertikal.
| Class |
Fungsi |
flex-row |
Susun elemen secara horizontal (default) |
flex-row-reverse |
Susun horizontal dari kanan ke kiri |
flex-col |
Susun elemen secara vertikal |
flex-col-reverse |
Susun vertikal dari bawah ke atas |
Contoh:
<div class="flex flex-col space-y-2">
<div class="bg-blue-500 text-white p-2">Baris 1</div>
<div class="bg-green-500 text-white p-2">Baris 2</div>
</div>
3. Justify Content
Class berikut mengatur posisi horizontal dari elemen anak di dalam flex container.
| Class |
Fungsi |
justify-start |
Rata kiri (default) |
justify-center |
Pusat secara horizontal |
justify-end |
Rata kanan |
justify-between |
Ruang di antara elemen |
justify-around |
Ruang di sekitar elemen |
justify-evenly |
Ruang merata antar elemen |
Contoh:
<div class="flex justify-between bg-gray-100 p-4">
<span>Logo</span>
<span>Menu</span>
<span>Profil</span>
</div>
4. Align Items
Class berikut digunakan untuk mengatur posisi vertikal dari elemen di dalam baris flex.
| Class |
Fungsi |
items-start |
Rata atas |
items-center |
Tengah secara vertikal |
items-end |
Rata bawah |
items-stretch |
Isi tinggi penuh (default) |
items-baseline |
Berdasarkan garis dasar teks |
Contoh:
<div class="flex items-center h-24 bg-gray-200">
<div class="bg-blue-500 text-white p-2">Tengah</div>
</div>
5. Wrap Flex Item
Secara default, elemen dalam flex akan berada dalam satu baris. Gunakan class berikut agar item bisa membungkus ke baris berikutnya.
| Class |
Fungsi |
flex-wrap |
Membungkus ke baris baru |
flex-nowrap |
Tidak membungkus (default) |
flex-wrap-reverse |
Bungkus dengan urutan terbalik |
Contoh:
<div class="flex flex-wrap gap-2">
<div class="bg-blue-500 text-white p-2 w-1/3">Item 1</div>
<div class="bg-green-500 text-white p-2 w-1/3">Item 2</div>
<div class="bg-red-500 text-white p-2 w-1/3">Item 3</div>
<div class="bg-yellow-500 text-white p-2 w-1/3">Item 4</div>
</div>
6. Grow, Shrink, dan Basis
Tailwind juga menyediakan class untuk mengontrol apakah elemen bisa memperluas (grow), menyusut (shrink), atau memiliki ukuran dasar tertentu (basis).
| Class |
Fungsi |
flex-grow |
Elemen akan tumbuh (meluas) |
flex-shrink |
Elemen akan menyusut |
flex-none |
Tidak tumbuh dan tidak menyusut |
basis-1/2 |
Menentukan ukuran dasar 50% |
Contoh:
<div class="flex gap-2">
<div class="bg-blue-500 text-white p-4 flex-none w-24">Tetap</div>
<div class="bg-green-500 text-white p-4 flex-grow">Mengisi Ruang</div>
</div>
Contoh Lengkap: Header Navigasi
Untuk latihan, berikut contoh implementasi flexbox lengkap.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Header Flexbox</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<header class="flex justify-between items-center bg-white p-4 rounded shadow">
<h1 class="text-xl font-bold text-blue-600">Logo</h1>
<nav class="flex gap-4">
<a href="#" class="text-gray-700 hover:text-blue-500">Beranda</a>
<a href="#" class="text-gray-700 hover:text-blue-500">Tentang</a>
<a href="#" class="text-gray-700 hover:text-blue-500">Kontak</a>
</nav>
</header>
</body>
</html>
Kesimpulan
Dengan bantuan class flex di Tailwind CSS, kita bisa membangun layout horizontal dan vertikal dengan sangat fleksibel dan mudah dikendalikan. Baik untuk membuat navbar, card layout, maupun dashboard, sistem flexbox adalah fondasi penting dalam menyusun antarmuka web modern.
Pada artikel selanjutnya, kita akan membahas tentang sistem Grid di Tailwind CSS — solusi powerful lainnya untuk layout yang lebih kompleks dan terstruktur.
Terima Kasih