📐 Layout dengan Flexbox

Flexbox itu keren banget buat ngatur tata letak di web. Bayangin kamu punya beberapa kotak yang pengen disusun rapi, entah itu secara baris (horizontal) atau kolom (vertikal), tanpa harus ribet ngatur posisi satu per satu. Nah, Flexbox bikin semua itu jadi gampang dan cepat. Kamu tinggal atur beberapa properti, dan elemen-elemen langsung bisa menyesuaikan ukuran dan posisinya dengan otomatis, sesuai ruang yang tersedia.
Selain itu, Flexbox juga bikin halaman web jadi responsif, alias bisa adaptasi dengan ukuran layar berbeda — mulai dari layar HP kecil sampai layar desktop besar. Jadi, gak perlu lagi repot pakai banyak kode untuk bikin layout yang fleksibel. Cukup pakai Flexbox, elemen-elemen di halaman kamu bisa rapi, proporsional, dan mudah diatur sesuai kebutuhan! Seru banget, kan?

🔧 Properti Utama Flexbox

• display: flex – Ini seperti nyalain mode fleksibel buat wadah elemen kamu. Begitu diaktifin, anak-anak elemen di dalamnya langsung bisa diatur dengan gampang pakai Flexbox.
• flex-direction – Menentukan arah susunan elemen, bisa secara horizontal (row) atau vertikal (column).
• justify-content – Mengatur posisi elemen secara horizontal dalam flex container, seperti rata kiri, tengah, kanan, atau dengan jarak tertentu.
• align-items – Mengatur posisi elemen secara vertikal agar sejajar di atas, tengah, atau bawah dalam flex container.

📄 Contoh Kode

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}
</style>

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

⚙️ Demo Interaktif: