Hari 2: Flexbox Responsive

Menyusun layout fleksibel dengan Flexbox — arah, wrap, gap, dan pola navbar / kartu yang responsive.

Pengantar

Hari 1 memberi fondasi. Hari ini Flexbox — alat utama untuk baris/kolom yang bisa melipat di layar kecil.

Konsep inti

Parent: display: flex

flex-direction: row | column
flex-wrap: wrap agar item turun baris
justify-content: sumbu utama
align-items: sumbu silang
gap: jarak antar item
Child: flex: 1 agar tumbuh merata

Navbar yang melipat

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      background: #0f172a;
      color: white;
    }
    nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    nav a {
      color: #99f6e4;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <header>
    <strong>Brand</strong>
    <nav>
      <a href="#a">Beranda</a>
      <a href="#b">Kursus</a>
      <a href="#c">Blog</a>
      <a href="#d">Kontak</a>
    </nav>
  </header>
  <p style="padding:1rem">Perkecil lebar preview — menu tetap rapi berkat flex-wrap.</p>
</body>
</html>

Preview

Kartu berjejer lalu turun

Kartu flex wrap

<style>
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 1rem; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 160px;
  padding: 1rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
</style>
<div class="row">
<article class="card"><strong>HTML</strong><p>Struktur</p></article>
<article class="card"><strong>CSS</strong><p>Tampilan</p></article>
<article class="card"><strong>JS</strong><p>Interaksi</p></article>
</div>

Preview

Column di mobile, row di desktop

Mobile first flex-direction

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body { margin: 1rem; font-family: system-ui, sans-serif; }
    .layout {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .main, .side {
      padding: 1rem;
      border-radius: 0.75rem;
    }
    .main { background: #ccfbf1; }
    .side { background: #e2e8f0; }
    @media (min-width: 640px) {
      .layout { flex-direction: row; }
      .main { flex: 2; }
      .side { flex: 1; }
    }
  </style>
</head>
<body>
  <div class="layout">
    <main class="main">Konten utama</main>
    <aside class="side">Sidebar</aside>
  </div>
</body>
</html>

Preview

Kuis hari 2

Property mana yang membuat item flex turun ke baris baru?

Untuk menukar arah dari kolom (mobile) ke baris (desktop), yang diubah biasanya?

Checklist

0/4 selesai

Membuat navbar flex
Mencoba flex-wrap pada kartu
Menerapkan mobile-first direction
Siap ke CSS Grid

Hari 2: Flexbox Responsive

Pengantar

Konsep inti

Kartu berjejer lalu turun

Column di mobile, row di desktop

Kuis hari 2

Checklist

Komentar