Flexbox

Menguasai CSS Flexbox untuk membuat layout satu dimensi: navbar, grid kartu responsif, dan centering konten dengan mudah.

Phase

Phase 2 — CSS

Topik

CSS Fundamentals

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Memahami konsep flex container dan flex item
02Menggunakan flex-direction: row, column, row-reverse
03Menguasai justify-content: flex-start, center, space-between, space-around
04Menguasai align-items: stretch, center, flex-start, flex-end
05Menggunakan flex-wrap dan gap
06Memahami flex-grow, flex-shrink, flex-basis

📖Sub-topik & Materi

01Flex container (parent) vs flex items (children)
02flex-direction: row (default), column, row-reverse, column-reverse
03justify-content: flex-start, center, space-between, space-around, space-evenly
04align-items: stretch (default), center, flex-start, flex-end, baseline
05flex-wrap: nowrap (default) vs wrap; gap untuk spacing
06flex: grow shrink basis — shorthand untuk mengontrol ukuran item

💡Penjelasan Konsep

Konsep 1

Flexbox: Container dan Item

Flexbox adalah sistem layout 1 dimensi (satu baris atau kolom). Properti Flexbox dibagi dua: properti CONTAINER (ditulis di parent dengan display: flex) dan properti ITEM (ditulis di child). Jangan bingung keduanya — flex-direction, justify-content, align-items ada di container; flex-grow, flex-shrink, align-self ada di item.

css

/* Container */
.navbar {
  display: flex;
  flex-direction: row;       /* default: horizontal */
  justify-content: space-between; /* distribusi di sumbu utama */
  align-items: center;       /* rata di sumbu silang */
  gap: 16px;                 /* jarak antar item */
}

/* Item */
.nav-logo {
  flex-shrink: 0; /* tidak boleh mengecil */
}

.nav-links {
  flex: 1; /* tumbuh mengisi sisa ruang */
}

Konsep 2

justify-content vs align-items

justify-content mengatur distribusi item di sumbu UTAMA (horizontal untuk row, vertikal untuk column). align-items mengatur rata item di sumbu SILANG (vertikal untuk row, horizontal untuk column). Untuk centering sempurna di tengah layar, gunakan keduanya dengan nilai center.

css

/* Centering sempurna */
.hero {
  display: flex;
  justify-content: center; /* horizontal: tengah */
  align-items: center;     /* vertikal: tengah */
  min-height: 100vh;
}

/* Spread items: logo kiri, menu kanan */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Wrap: pindah baris jika tidak cukup */
.kartu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.kartu-grid .kartu {
  flex: 1 1 280px; /* tumbuh, kecil, min 280px */
}

💻Contoh Kode Lengkap

css

/* Navbar dengan Flexbox */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: #1A4A8A;
}
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

/* Grid Kartu Responsif */
.grid-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.kartu {
  flex: 1 1 280px; /* grow: 1 shrink:1 basis:280px */
  /* Minimum 280px, tapi bisa membesar mengisi ruang */
}

/* Center Vertikal + Horizontal */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

⚡Latihan Kelas · Buat layout navigasi horizontal dan grid kartu menggunakan Flexbox

Ubah <nav> menjadi flex container dengan justify-content: space-between

Buat ul.nav-links sebagai flex container dengan gap: 24px

Buat section berisi 4 kartu dalam div.grid-kartu dengan flex-wrap: wrap

Set flex: 1 1 250px pada setiap kartu

Uji dengan mengecilkan ukuran browser — kartu harus wrap ke baris baru

📝 Tugas 3.5 — Flexbox Layout

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat halaman portofolio sederhana dengan: (1) navbar Flexbox (logo kiri, menu kanan), (2) hero section yang di-center sempurna, (3) section "skills" dengan kartu-kartu dalam flex grid yang wrap otomatis.

Kriteria Penilaian	Poin
Navbar menggunakan Flexbox dengan logo dan menu terpisah	25
Hero section di-center sempurna (vertikal + horizontal)	25
Grid kartu menggunakan flex-wrap dan wrap saat layar mengecil	30
gap digunakan (bukan margin) untuk spacing antar item	20
Total	100