Flexbox CSS: Layout Modern untuk Web
Apa Itu Flexbox?
Flexbox (Flexible Box) adalah fitur dalam CSS yang mempermudah pengaturan layout elemen-elemen di halaman web. Dengan Flexbox, kita bisa menyusun item secara horizontal atau vertikal dengan mudah, serta mengatur jarak, perataan, dan urutan item secara dinamis.
Flexbox sangat cocok digunakan untuk membuat layout satu dimensi, seperti navbar, card layout, form, dan lainnya — tanpa harus menggunakan float atau positioning secara rumit.
Cara Kerja Flexbox
Flexbox bekerja dengan dua komponen utama:
- Flex Container – Elemen induk yang membungkus item-item.
- Flex Items – Elemen-lemen anak di dalam flex container.
Untuk mengaktifkan Flexbox, cukup tambahkan properti berikut ke container:
.container {
display: flex;
}
Setelah itu, Anda bisa mengatur arah, perataan, ukuran, dan urutan item dengan properti Flexbox.
Arah Flexbox (flex-direction)
Properti flex-direction menentukan arah penempatan item.
Contoh:
.container {
display: flex;
flex-direction: row; /* Default */
}
| Nilai | Penjelasan |
|---|---|
| row | Baris dari kiri ke kanan (default) |
| row-reverse | Baris dari kanan ke kiri |
| column | Kolom dari atas ke bawah |
| column-reverse | Kolom dari bawah ke atas |
Perataan Item (justify-content)
Properti justify-content mengatur perataan item sepanjang sumbu utama (main axis).
Contoh:
.container {
display: flex;
justify-content: center;
}
| Nilai | Penjelasan |
|---|---|
| flex-start | Rata kiri / atas (default) |
| flex-end | Rata kanan / bawah |
| center | Tengah |
| space-between | Jarak rata antar item, tanpa jarak di ujung |
| space-around | Jarak rata dengan ruang di sekitar setiap item |
| space-evenly | Jarak antar item sama termasuk ujung |
Perataan Vertikal (align-items)
Properti align-items mengatur perataan item sepanjang sumbu silang (cross axis).
Contoh:
.container {
display: flex;
align-items: center;
}
| Nilai | Penjelasan |
|---|---|
| stretch | Memperluas item untuk mengisi container (default) |
| flex-start | Rata atas |
| flex-end | Rata bawah |
| center | Tengah |
| baseline | Sejajarkan berdasarkan teks dasar |
Wrap dan Wrap-Reversal (flex-wrap)
Secara default, semua item akan dipaksa masuk dalam satu baris. Untuk membuat baris baru saat item melebihi lebar container, gunakan flex-wrap.
Contoh:
.container {
display: flex;
flex-wrap: wrap;
}
| Nilai | Penjelasan |
|---|---|
| nowrap | Semua item dalam satu baris (default) |
| wrap | Pindah ke baris baru jika penuh |
| wrap-reverse | Sama seperti wrap, tapi arahnya terbalik |
Pengaturan Spasi Antara Item (gap)
Properti gap digunakan untuk memberi jarak antar item tanpa harus menggunakan margin.
.container {
display: flex;
gap: 10px 20px; /* 10px vertikal, 20px horizontal */
}
Mengatur Urutan Item (order)
Anda bisa mengubah urutan item dengan properti order. Secara default, semua item memiliki nilai 0. Semakin rendah nilainya, semakin awal item ditampilkan.
Contoh:
.item1 {
order: 2;
}
.item2 {
order: 1;
}
Contoh Praktis
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
CSS
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 15px;
flex-wrap: wrap;
border: 1px solid #ccc;
padding: 10px;
}
.item {
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
}
Dengan kode ini, item akan tersusun rapi dalam satu baris, dan akan pindah ke baris baru jika tidak muat.
Visualisasi Flexbox di Browser
Gunakan Developer Tools (F12) untuk melihat bagaimana Flexbox bekerja pada elemen. Anda juga bisa mencoba eksperimen langsung dengan mengganti nilai-nilai seperti flex-direction, justify-content, dan align-items.
Kesimpulan
Flexbox adalah alat yang sangat berguna untuk membuat layout modern yang responsif dan fleksibel. Dengan memahami konsep Flex Container dan Flex Items, serta properti seperti flex-direction, justify-content, dan align-items, Anda bisa membuat tata letak elemen dengan cepat dan rapi.
Selanjutnya, kita akan membahas CSS Grid, sistem layout dua dimensi yang lebih kompleks namun sangat powerful.
💡 Tips Praktis
- Gunakan Flexbox untuk layout satu dimensi seperti navbar, card, dan form.
- Kombinasikan justify-content dan align-items untuk perataan yang presisi.
- Latih penggunaan flex-wrap, gap, dan order untuk kontrol yang lebih baik.
- Uji hasil layout Anda menggunakan browser developer tools.
