“Bikin layout rapi dan responsif tanpa ribet? Jawabannya: Flexbox!”

🎯 1. Apa Itu Flexbox?

Flexbox (Flexible Box Layout) adalah fitur CSS yang memudahkan kamu dalam menyusun dan mengatur elemen secara fleksibel di halaman web. Cocok banget untuk:

Navbar yang responsif
Galeri gambar
Card layout
Centering elemen secara vertikal dan horizontal

🛠️ 2. Dasar-Dasar Properti Flexbox

📦 a. Container Flex

.container {
  display: flex;
}

🔄 b. Arah (Main Axis)

.container {
  flex-direction: row; /* default: horizontal */
  flex-direction: column; /* vertikal */
}

📏 c. Pembagian Ruang

.container {
  justify-content: space-between;
}

flex-start, flex-end, center, space-between, space-around, space-evenly

🧭 d. Penyesuaian Arah Samping (Cross Axis)

.container {
  align-items: center;
}

flex-start, flex-end, center, stretch, baseline

💡 3. Contoh Layout Sederhana

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background: steelblue;
  color: white;
  font-size: 2rem;
  text-align: center;
}

📱 4. Buat Layout Responsif dengan Flexbox

Flexbox memudahkan pembuatan layout mobile-first:

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 1 1 300px;
}

Artinya:

1: grow (boleh membesar)
1: shrink (boleh mengecil)
300px: ukuran dasar

⚡ 5. Trik Flexbox Populer

Centering horizontal & vertical:

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

Buat sidebar & konten utama:

.layout {
  display: flex;
}
.sidebar {
  flex: 1;
}
.content {
  flex: 3;
}

🧪 6. Tools untuk Belajar Flexbox

Flexbox Froggy 🐸 — Belajar lewat game
CSS Tricks Flexbox Guide
Chrome DevTools → "Elements" tab untuk inspect properti Flex

📌 Kesimpulan

Flexbox adalah senjata wajib front-end developer modern. Dengan pemahaman dasar Flexbox, kamu bisa membuat layout profesional dan responsif tanpa mengandalkan framework.

Flexbox CSS: Solusi Cerdas Layout Web yang Fleksibel & Responsif