Flexbox: Sahabat Terbaik Layout 1 Dimensi
Dulu, memusatkan sebuah kotak di tengah-tengah layar (centering) adalah mimpi buruk para web developer. Kita
harus menggunakan trik float atau berbagai margin hack yang memusingkan.
Lalu datanglah sang penyelamat: CSS Flexible Box Layout (Flexbox). Flexbox diciptakan
khusus untuk mengatur layout secara 1 Dimensi (ke samping / memanjang ATAU ke bawah /
tinggi). Ia membuat urusan menata, menyelaraskan, dan mendistribusikan ruang antar elemen menjadi sangat
mudah!
📦 Konsep Wadah (Container) dan Isi (Item)
Aturan terpenting dalam grup Flexbox adalah membedakan mana Bapak (Container) dan mana Anak (Item). Kamu mengatur layout anak-anaknya dengan cara memberikan mantra pada bapaknya.
<div class="container-bapak">
<div class="item-anak">A</div>
<div class="item-anak">B</div>
<div class="item-anak">C</div>
</div>.container-bapak {
display: flex;
}Begitu display: flex; diberikan pada bapaknya, semua anaknya
otomatis berjajar satu baris ke kanan merapatkan barisan!
🧭 Main Axis vs Cross Axis (Arah Kompas)
Karena Flexbox adalah layout 1 dimensi, kita harus menentukan "Jalur Utamanya" (Main Axis). Jalur utamanya
berarah ke samping (Row) atau ke bawah (Column)?
Ini diatur menggunakan Mantra Bapak: flex-direction.
flex-direction: row; (Default)
Sumbu Utama (Main Axis) = Kiri ke Kanan →
flex-direction: column;
Sumbu Utama (Main Axis) = Atas ke Bawah ↓
🦸♂️ Dua Superpower Utama (Justify & Align)
Setelah arah utamanya ditentukan, kita punya 2 properti sihir dari sang Bapak untuk menata letak anak-anaknya.
🚀 Justify Content (Di Sumbu Utama)
Mengatur perataan anak-anak pada jalur arah yang sedang aktif (Main Axis). Jika row, maka ia mengatur kiri-kanan. Jika column, ia mengatur atas-bawah.
Pilihan: flex-start, flex-end, center, space-between, space-around, space-evenly
⚓ Align Items (Di Jalur Silang / Cross Axis)
Mengatur perataan pada sumbu tegak lurusnya (Sumbu Silang / Cross Axis). Jika jalurnya row horizontal, properti ini mengatur bagaimana elemen menempel di atap, di lantai, atau melayang di tengah secara vertikal.
Pilihan: flex-start, flex-end, center, stretch, baseline
🎮 Playground: Mesin Flexbox
Pusing menghafalkan arah dan nama propertinya? Jangan khawatir! Mainkan kombinasi tombol di bawah ini dan perhatikan bagaimana ketiga kotak biru bergerak menari dalam garis putus-putus (The Container).
display: flex;
flex-direction:
justify-content:
align-items:
gap:
}
Container Box (Parent)
👼 Keajaiban untuk Sang Anak (Flex Item Properties)
Walaupun sang Bapak (Container) punya kekuasaan penuh, si Anak (Item) juga punya beberapa *"Cheat Code"* (property) yang hanya bisa digunakan oleh mereka.
flex-grow
Tingkat kelahapan anak untuk memakan sisa ruang kosong di bapaknya. Nilai defaultnya 0 (tidak melahap). Jika di setting 1, dia akan melar mengisi sisa ruang.
order
Mengganti urutan visual elemen tanpa perlu mengubah kode struktur urutan HTML-nya! Berguna untuk merombak susunan versi Mobile dan Desktop. Semakin kecil angkanya, semakin maju.
Order: 2
Order: -1
Order: 1
(Tampilnya akan menjadi: Kotak Ungu, Kotak 3, lalu Kotak 1)
📋 Ringkasan Emas Flexbox
Syarat Sah:
Bapak harus diberi mantra display: flex; untuk mengaktifkan
kekuatan flexbox pada anak-anak panti asuhannya (1 tingkat di bawahnya, tidak menembus cucu).
Untuk Si Bapak (Container Rules):
flex-direction: Menentukan letak jalan raya utama, baris (row) atau kolom vertikal (column).justify-content: Membariskan anak pada jalur utamanya (Main axis).align-items: Membariskan anak pada jalur silangnya (Cross axis).gap: Jarak (margin otomatis) pembatas antar anak. Sangat rapi!
Misi Termudah di Dunia: Centering Div 🎯
Untuk mengeluarkan elemen tepat melayang di tengah-tengah secara sempurna, cukup beri 3 baris ini ke bapaknya:
display: flex;
justify-content: center;
align-items: center;