Utility Layout Fleksibel

Kenapa ini penting

Hampir setiap komponen antarmuka adalah soal menyusun kotak dalam satu baris atau satu kolom: navbar (logo di kiri, menu di kanan), baris tombol, item daftar dengan avatar dan teks, footer kartu dengan harga dan tombol. Semua itu pekerjaan Flexbox.

Flexbox di CSS biasa punya banyak properti dengan nama yang mudah tertukar (justify-content vs align-items). Tailwind membuatnya lebih ringkas dan mudah diingat. Setelah modul ini, kamu bisa membangun navbar responsif dan berbagai pola baris/kolom tanpa ragu.

Konsep inti

Mengaktifkan flex dan arah

flex menjadikan elemen sebagai flex container; anak-anaknya menjadi flex item.
flex-row (default, kiri ke kanan), flex-col (atas ke bawah), flex-row-reverse, flex-col-reverse.
inline-flex untuk flex yang berperilaku seperti teks (misalnya tombol dengan ikon).

Sumbu utama vs sumbu silang

Ini kunci memahami flexbox. Analoginya: bayangkan antrean orang di loket. Arah antrean adalah sumbu utama. Arah tegak lurusnya (tinggi badan orang, sejajar kepala atau kaki) adalah sumbu silang.

justify-* mengatur posisi di sumbu utama: justify-start, justify-center, justify-end, justify-between (ujung ke ujung), justify-around, justify-evenly.
items-* mengatur posisi di sumbu silang: items-start, items-center, items-end, items-stretch (default, merentang), items-baseline.
self-* mengatur satu item saja: self-end, self-center.

Kalau flex-row, sumbu utama horizontal. Kalau flex-col, sumbu utama jadi vertikal, sehingga justify-center menengahkan secara vertikal.

Wrap

Secara default flex item dipaksa dalam satu baris. flex-wrap mengizinkan item turun ke baris berikutnya saat ruang habis. Cocok untuk daftar tag atau chip.

Grow, shrink, basis

grow (flex-grow: 1): item mengambil sisa ruang. grow-0 mematikannya.
shrink-0: item tidak boleh menyusut. Penting untuk ikon dan avatar.
basis-64, basis-1/3: ukuran awal item sebelum ruang dibagi.
flex-1: singkatan grow + shrink + basis 0%, membuat item berbagi ruang sama rata.
flex-none: tidak tumbuh dan tidak menyusut.

Order

order-first, order-last, order-1, order-2 mengubah urutan tampilan tanpa mengubah HTML. Contoh: di HP gambar di atas teks, di desktop gambar di kanan dengan md:order-last. Hati-hati, urutan baca screen reader tetap mengikuti HTML.

Contoh kode

<!-- Navbar: logo kiri, menu tengah/kanan, tombol di kanan -->
<header class="border-b border-gray-200 bg-white">
  <nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3">
    <a href="#" class="flex items-center gap-2 text-lg font-bold">
      <span class="grid size-8 place-items-center rounded-lg bg-indigo-600 text-white">K</span>
      KodingUp
    </a>

    <!-- Menu: disembunyikan di HP, tampil flex mulai md -->
    <ul class="hidden items-center gap-8 text-sm font-medium text-gray-600 md:flex">
      <li><a href="#" class="hover:text-gray-900">Kelas</a></li>
      <li><a href="#" class="hover:text-gray-900">Mentor</a></li>
      <li><a href="#" class="hover:text-gray-900">Harga</a></li>
    </ul>

    <div class="flex items-center gap-3">
      <a href="#" class="hidden text-sm font-medium sm:inline">Masuk</a>
      <a href="#" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white">Daftar</a>
      <!-- Tombol menu mobile -->
      <button id="tombolMenu" class="cursor-pointer rounded-md p-2 md:hidden" aria-label="Buka menu" aria-expanded="false">☰</button>
    </div>
  </nav>

  <!-- Menu mobile: kolom, tersembunyi sampai tombol diklik -->
  <ul id="menuMobile" class="hidden flex-col gap-1 border-t border-gray-200 px-4 py-3 md:hidden">
    <li><a href="#" class="block rounded px-2 py-2 hover:bg-gray-100">Kelas</a></li>
    <li><a href="#" class="block rounded px-2 py-2 hover:bg-gray-100">Mentor</a></li>
    <li><a href="#" class="block rounded px-2 py-2 hover:bg-gray-100">Harga</a></li>
  </ul>
</header>

<script>
  // Toggle menu mobile: ganti class hidden <-> flex
  const tombol = document.getElementById("tombolMenu");
  const menu = document.getElementById("menuMobile");
  tombol.addEventListener("click", () => {
    const terbuka = menu.classList.toggle("hidden") === false;
    menu.classList.toggle("flex", terbuka);
    tombol.setAttribute("aria-expanded", String(terbuka));
  });
  // → klik ☰ menampilkan menu vertikal, klik lagi menyembunyikan
</script>

<!-- Menengahkan sempurna -->
<div class="flex h-64 items-center justify-center bg-gray-100">Tepat di tengah</div>

<!-- Item daftar: avatar tidak menyusut, teks mengambil sisa ruang, tanggal di kanan -->
<div class="flex items-center gap-3 p-3">
  <img src="https://i.pravatar.cc/80?img=8" alt="" class="size-10 shrink-0 rounded-full" />
  <div class="min-w-0 flex-1">
    <p class="truncate font-medium">Andi mengomentari tugasmu</p>
    <p class="truncate text-sm text-gray-500">"Bagian grid-nya sudah keren, tinggal rapikan..."</p>
  </div>
  <span class="shrink-0 text-xs text-gray-400">2 m</span>
</div>

<!-- flex-wrap: daftar tag yang turun baris -->
<div class="flex flex-wrap gap-2">
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">HTML</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">CSS</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">JavaScript</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">React</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">Tailwind</span>
</div>

<!-- Footer tempel di bawah: kolom penuh layar, main mengambil sisa ruang -->
<div class="flex min-h-dvh flex-col">
  <header class="p-4">Header</header>
  <main class="flex-1 p-4">Konten</main>
  <footer class="p-4">Footer selalu di bawah</footer>
</div>

<!-- order: gambar di atas pada HP, di kanan pada desktop -->
<section class="flex flex-col gap-6 md:flex-row md:items-center">
  <img src="https://picsum.photos/seed/belajar/600/400" alt="" class="rounded-xl md:order-last md:w-1/2" />
  <div class="md:w-1/2">
    <h2 class="text-2xl font-bold">Belajar dari proyek nyata</h2>
    <p class="mt-2 text-gray-600">Setiap minggu kamu membangun satu fitur utuh.</p>
  </div>
</section>

Kesalahan umum

Tertukar justify-* dan items-*. Ingat: justify = sumbu utama (arah flex), items = sumbu silang. Saat pakai flex-col, keduanya ikut berputar.
Ikon atau avatar mengecil (gepeng). Tambahkan shrink-0.
Lupa flex-wrap, sehingga item meluber keluar layar di HP.
Memakai flex untuk layout dua dimensi (baris dan kolom sekaligus, seperti galeri). Itu lebih cocok untuk grid.
Mengubah urutan dengan order-* untuk konten penting. Screen reader dan Tab tetap mengikuti urutan HTML; susun HTML sesuai urutan logis.

Latihan

Mudah, Buat baris tiga tombol yang rata kanan dengan jarak 8px.
Sedang, Buat kartu dengan header (judul kiri, tombol "⋯" kanan) dan footer (harga kiri, tombol "Beli" kanan).
Menantang, Buat layout "sidebar + konten" di mana sidebar lebar tetap 16rem dan tidak menyusut, konten mengambil sisa ruang, dan di bawah md sidebar berada di atas konten (kolom).

Lihat solusi

Baris tombol:

<div class="flex justify-end gap-2">
  <button class="rounded border px-3 py-1.5">Batal</button>
  <button class="rounded border px-3 py-1.5">Draf</button>
  <button class="rounded bg-gray-900 px-3 py-1.5 text-white">Kirim</button>
</div>

Kartu:

<div class="w-80 rounded-xl border border-gray-200">
  <div class="flex items-center justify-between p-4">
    <h3 class="font-semibold">Paket Hemat</h3>
    <button class="cursor-pointer rounded p-1 hover:bg-gray-100" aria-label="Opsi">⋯</button>
  </div>
  <div class="flex items-center justify-between border-t border-gray-200 p-4">
    <span class="text-lg font-bold">Rp49.000</span>
    <button class="rounded-lg bg-indigo-600 px-4 py-2 text-white">Beli</button>
  </div>
</div>

Sidebar + konten:

<div class="flex flex-col md:flex-row">
  <aside class="bg-gray-100 p-4 md:w-64 md:shrink-0">Sidebar</aside>
  <main class="flex-1 p-4">Konten utama mengambil sisa ruang</main>
</div>

Ringkasan

flex + flex-row/flex-col menentukan arah sumbu utama.
justify-* mengatur sumbu utama, items-* sumbu silang, self-* satu item.
flex-wrap mengizinkan item turun baris; gap-* mengatur jaraknya.
flex-1, grow, shrink-0, basis-* mengatur cara item berbagi ruang.
order-* mengubah urutan visual, tapi jangan untuk konten yang urutannya penting.