Flexbox Studi Kasus: Navbar dan Card

Saatnya merangkai semuanya

Teori flexbox sudah lengkap. Sekarang kita bangun dua komponen yang muncul di hampir setiap website: navbar dan daftar kartu.

Studi kasus 1: navbar

Kebutuhan: logo di kiri, menu di kanan, semuanya tengah secara vertikal. Di layar kecil, menu turun ke bawah logo.

<nav class="navbar">
  <a class="logo" href="#">OmniDev</a>
  <ul class="menu">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tutorial</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #0f172a;
}

.logo {
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

.menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  color: #cbd5e1;
  text-decoration: none;
}

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    gap: 12px;
  }
}

Perhatikan: <ul> juga dijadikan flex container buat mensejajarkan item menunya. Flexbox bisa bersarang tanpa masalah.

Studi kasus 2: kartu dengan footer menempel bawah

Kebutuhan: daftar kartu produk yang tingginya beda-beda (deskripsi panjang-pendek), tapi tombol "Beli" selalu sejajar di bawah.

<div class="daftar">
  <article class="kartu">
    <h3>Kopi Susu</h3>
    <p>Deskripsi pendek.</p>
    <button>Beli</button>
  </article>
  <article class="kartu">
    <h3>Kopi Hitam</h3>
    <p>Deskripsi yang jauh lebih panjang tentang kenikmatan kopi hitam pahit yang autentik.</p>
    <button>Beli</button>
  </article>
</div>

.daftar {
  display: flex;
  gap: 20px;
}

.kartu {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.kartu p {
  flex-grow: 1; /* paragraf memakan sisa ruang, mendorong tombol ke bawah */
}

.kartu button {
  margin-top: 16px;
}

Triknya: kartu dijadikan flex column, lalu paragraf diberi flex-grow: 1 sehingga ia memakan semua sisa ruang vertikal dan tombol terdorong ke bawah. Semua tombol sejajar walau deskripsi beda panjang.

Catatan teknis: pola "footer menempel bawah" ini juga berguna buat layout halaman: jadikan body flex column dengan min-height: 100vh, beri flex-grow: 1 pada konten utama, dan footer otomatis menempel di bawah walau konten sedikit (sticky footer klasik tanpa hack).

Checklist flexbox

Sebelum lanjut ke Grid, pastikan kamu bisa menjawab ya untuk semua:

• Menengahkan elemen horizontal + vertikal? (justify + align center)
• Bikin kolom sama lebar? (flex: 1)
• Bikin item turun baris otomatis? (flex-wrap)
• Navbar logo-kiri menu-kanan? (space-between)

Rangkuman

Navbar = space-between + align center. Kartu sejajar = flex column + flex-grow pada konten. Dua pola ini menutupi 80% kebutuhan layout komponen sehari-hari. Kalau polanya dua dimensi (baris DAN kolom yang sejajar), saatnya Grid.