Layout dengan Flexbox: Mengatur Posisi Elemen Jadi Lebih Mudah!

“Ingin elemen di web bisa rapi dan fleksibel di semua ukuran layar, belajar Flexbox adalah kuncinya.”

---

🎯 1. Apa Itu Flexbox?

Flexbox (Flexible Box Layout) adalah fitur di CSS yang membantu kita kita untuk mengatur posisi elemen di dalam sebuah container. Cocok banget untuk menyusun layout responsif tanpa ribet dengan float atau position.

---

🧱 2. Struktur Dasar Flexbox

Untuk mulai menggunakan Flexbox, cukup tambahkan display: flex pada container.

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container {
  display: flex;
}
.box {
  padding: 20px;
  background: lightblue;
  margin: 5px;
}

---

🔧 3. Properti Flexbox Paling Sering Digunakan

Pada Container:

Pada Item:

---

🖼️ 4. Contoh Kasus: Galeri 3 Kotak Rata Tengah

<div class="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.item {
  background: salmon;
  padding: 30px;
  margin: 10px;
  color: white;
  font-size: 20px;
}

---

📱 5. Tips Responsif: flex-wrap dan media queries

Tambahkan flex-wrap: wrap; untuk memastikan elemen bisa turun ke baris berikutnya di layar kecil.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

Gunakan media queries untuk mengatur layout berdasarkan ukuran layar:

@media (max-width: 600px) {
  .item {
    flex: 100%;
  }
}

---

✅ 6. Kesimpulan

• Flexbox memudahkan layouting horizontal & vertikal.

• Properti penting: justify-content, align-items, dan flex-direction.

• Cocok untuk membuat layout responsif, galeri, navigasi, dsb.

---