1. What is Flexbox?
Flexbox (Flexible Box) adalah model tata letak satu dimensi di CSS.
Bayangkan Flexbox sebagai sebuah sistem cerdas yang bisa mengatur ruang, menyelaraskan posisi, dan mendistribusikan item di dalam sebuah kontainer, bahkan ketika ukuran item tersebut tidak diketahui atau bersifat dinamis.
2. Why use Flexbox?
Dulu, sebelum ada Flexbox, desainer web harus menggunakan teknik “kuno” seperti float atau table yang sering bikin sakit kepala. Inilah alasan kenapa Flexbox jadi standar industri:
- Penyelarasan Vertikal yang Mudah: Membuat elemen berada tepat di tengah (vertikal & horizontal) kini hanya butuh beberapa baris kode.
- Responsif Tanpa Ribet: Elemen bisa otomatis menyusut atau melebar untuk mengisi ruang yang tersedia tanpa perlu banyak media queries.
- Pengaturan Urutan: Kamu bisa mengubah urutan tampilan elemen secara visual (misal: yang di kiri pindah ke kanan) tanpa mengubah struktur HTML-nya.
- Distribusi Jarak: Mengatur jarak antar elemen agar sama rata (spasi antar kotak) menjadi sangat otomatis.
3. How does Flexbox work?
Flexbox bekerja dengan hubungan Parent (Container) dan Child (Items). Kamu memberikan perintah pada si Parent, dan anak-anaknya akan mengikuti aturan tersebut.
Berikut adalah properti “Wajib Tahu” untuk diimplementasikan:
A. Di Sisi Container (Parent)
display: flex;: Langkah pertama untuk mengaktifkan mode Flexbox.flex-direction: Menentukan arah (baris atau kolom).justify-content: Mengatur perataan di garis utama (horizontal secara default).align-items: Mengatur perataan di garis tegak lurus (vertikal secara default).
B. Di Sisi Items (Child)
flex-grow: Menentukan seberapa besar item boleh “tumbuh” dibanding temannya.flex-shrink: Menentukan kemampuan item untuk menyusut jika ruang penuh.order: Mengatur urutan tampil item.
