Cara Efektif Mengelola Layout dengan Utility Flex pada Tailwind CSS

Daftar Isi

  • flex Itu Apa Sih?
  • Utility flex yang Wajib Kamu Tau
  • Membuat Navbar Sederhana Memakai flex
  • Penutup

Di dunia Tailwind CSS yang penuh warna dan utility bertebaran ke mana-mana, ada satu utility yang menurutku gak boleh dilewatkan sama sekali.

Namanya: flex

Iya, flex. Simpel, pendek, tapi super berpengaruh. Bisa dibilang, flex ini adalah tulang punggung layout di hampir semua komponen modern. Mau bikin navbar? Butuh flex. Mau bikin card dengan tombol di bawah kanan? Pakai flex. Mau nyusun dua kolom berdampingan? Lagi-lagi: flex.

flex Itu Apa Sih?

Dalam Tailwind, flex adalah utility yang mengaktifkan sistem Flexbox di elemen HTML. Artinya, kamu bisa ngatur posisi anak-anak elemennya (child elements) dengan jauh lebih mudah dan fleksibel. (Makanya namanya flex kan?)

Setelah kamu menambahkan class="flex" ke suatu elemen, kamu bisa pakai utility tambahan buat ngatur:

  • Arah itemnya (horizontal atau vertikal)
  • Posisi itemnya (di tengah, di kanan, di kiri, dll)
  • Jarak antar itemnya
  • Apakah item bisa pindah baris kalau kelebihan

Utility flex yang Wajib Kamu Tau

Utility TailwindFungsi Cepatnya
flexAktifkan Flexbox
flex-rowSejajarkan item ke samping (default)
flex-colSusun item ke bawah
items-centerRata tengah vertikal
justify-centerRata tengah horizontal
justify-betweenItem paling kiri dan kanan
gap-x-* / gap-y-*Ngatur jarak horizontal / vertikal antar item
flex-wrapItem bisa turun ke baris baru kalau kelebihan

Membuat Navbar Sederhana Memakai flex

<div class="flex items-center justify-between p-4 bg-white shadow-md">
  <h1 class="text-lg font-bold">Brand</h1>
  <ul class="flex gap-6 text-sm">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Di contoh ini:

  • flex bikin elemen sejajar secara horizontal
  • items-center bikin semuanya sejajar secara vertikal
  • justify-between bikin logo di kiri, menu di kanan
  • gap-6 bikin menu-nya ada jarak

Preview :

Navbar Example

Penutup

Utility flex di Tailwind CSS bukan cuma penting, tapi wajib dikuasai. Hampir semua bagian dari website modern — mulai dari navbar, kartu produk, hero section, hingga footer — semuanya bisa dengan mudah diatur pakai flex.

Kalau kamu baru belajar Tailwind, kuasai flex dulu. Dengan itu aja, kamu udah bisa bikin tampilan website yang rapi, responsif, dan modern banget.