Flexbox di Tailwind itu Flexbox yang sama dengan yang kamu pelajari di CSS, cuma ditulis sebagai class di HTML. Tiap class isinya satu baris CSS: flex artinya display: flex, justify-between artinya justify-content: space-between. Bayangin bumbu sachet: daripada menakar garam, gula, dan merica satu per satu, kamu tinggal sobek satu bungkus yang isinya sudah pas. Class Tailwind itu sachet-nya, dan isinya CSS yang sudah kamu kenal.
🧪 Tebakan cepat:
<div class="justify-between">tanpa classflex. Logo dan Menu di dalamnya mencar ke kiri dan kanan gak? Tebak dulu, jawabannya ada di bagian "Tanpaflex, yang lain diam".
Navbar: Logo di kiri, Menu di kanan
Ini navbar yang sama dengan yang ada di Lab dan di latihan:
<div id="nav" class="flex items-center justify-between h-24 p-4">
<span>Logo</span>
<span>Menu</span>
</div>
| Class | CSS yang dihasilkan | Artinya |
|---|---|---|
flex |
display: flex; |
Flexbox nyala, Logo dan Menu jadi flex item |
items-center |
align-items: center; |
rata tengah dari atas ke bawah |
justify-between |
justify-content: space-between; |
yang pertama nempel kiri, yang terakhir nempel kanan |
h-24 |
height: 6rem; |
tinggi 96px |
p-4 |
padding: 1rem; |
jarak dalam 16px di tiap sisi |
- Semua class dipasang di
#nav, induknya. Dua<span>di dalamnya ikut diatur tanpa diberi class apa pun. h-24cuma supaya efek rata tengahnya kelihatan. Tanpa tinggi tambahan, navbar setinggi isinya, jadi atas dan tengah hampir sama.- Ingat skala angka Tailwind: 1 langkah = 0,25rem = 4px. Jadi
p-4= 16px danh-24= 96px.
Hasilnya, Logo nempel di kiri, Menu nempel di kanan, dan keduanya ada di tengah tinggi navbar. Coba di Lab: pilih justify-start, dan Menu langsung pindah ke sebelah Logo.
Tanpa flex, yang lain diam
justify-* dan items-* itu properti milik flex container. Kalau #nav gak punya flex, dia <div> biasa (display: block), dan browser mengabaikan justify-content dan align-items di situ. Jadi <div class="justify-between"> tanpa flex gak bikin apa-apa: Logo dan Menu tetap nempel berdua di kiri, kayak teks biasa. Itu jawaban tebakannya: gak mencar.
Pasangannya selalu begini: flex dulu, baru justify-*, items-*, dan gap-*.
Arah: flex-row dan flex-col
flex-row (flex-direction: row) adalah bawaannya: item berjajar dari kiri ke kanan, jadi gak perlu ditulis. flex-col (flex-direction: column) menumpuk item dari atas ke bawah.
<div id="nav" class="flex flex-col justify-between h-24 p-4">
<span>Logo</span>
<span>Menu</span>
</div>
Di flex-col, sumbu utamanya jadi tegak. justify-between sekarang menaruh Logo di atas dan Menu di bawah, dan items-* yang mengatur kiri-kanan. Patokannya: justify-* selalu ikut arah item berjajar (sumbu utama), items-* selalu tegak lurus dengannya (sumbu silang).
Sumbu utama (justify-) |
CSS | Sumbu silang (items-) |
CSS |
|---|---|---|---|
justify-start |
flex-start |
items-stretch (bawaan) |
stretch |
justify-center |
center |
items-start |
flex-start |
justify-end |
flex-end |
items-center |
center |
justify-between |
space-between |
items-end |
flex-end |
justify-around, justify-evenly |
space-around, space-evenly |
items-baseline |
baseline |
Jarak antar item: gap
gap-4 menghasilkan gap: 1rem, jadi ada jarak 16px di antara tiap item, tanpa margin di ujung-ujungnya. gap-2 = 8px, gap-8 = 32px. Dengan justify-between, gap jarang kelihatan, karena sisa ruangnya sudah dibagi ke tengah. Gap baru terasa di justify-start atau justify-center.
📌 Atur item satu per satu
Class tadi dipasang di induk. Ada juga class untuk satu item saja:
flex-1(flex: 1): item itu mengisi semua sisa ruang. Misalnya<span class="flex-1">Menu</span>bikin Menu melebar sampai ujung kanan.shrink-0(flex-shrink: 0): item gak boleh menyusut walau ruangnya sempit, pas buat logo. Di Tailwind v3 namanyaflex-shrink-0, di v4 tinggalshrink-0.flex-wrap(di induk): item yang gak muat turun ke baris baru, bukan menyusut.
⚠️ Jebakan yang sering ketemu
- Lupa
flex.justify-between items-centertanpaflexgak ngapa-ngapain. Latihannya mengecekdisplay: flexdi#nav, jadiflexharus ada. - Class di anak, bukan di induk.
<span class="flex justify-between">Logo</span>gak bikin Logo dan Menu berjajar. Pasang di#nav. - Nama class karangan.
justify-space-between,items-middle,flex-column, danalign-centergak ada. Tailwind gak kasih error, class-nya cuma gak menghasilkan CSS. Yang benarjustify-between,items-center,flex-col. - Ketuker
justifydanitems. Mau rata tengah dari atas ke bawah di navbar mendatar? Ituitems-center, bukanjustify-center.
TL;DR: Tiap class Flexbox Tailwind adalah satu baris CSS yang sudah kamu kenal: flex = display: flex, items-center = align-items: center, justify-between = justify-content: space-between, flex-col = flex-direction: column, gap-4 = jarak 16px. Pasang semuanya di induk, dan selalu mulai dengan flex, karena tanpa itu justify-* dan items-* diabaikan. justify-* ikut arah item berjajar, items-* tegak lurus dengannya. Navbar klasik: flex items-center justify-between p-4.
