Apa Itu Flexbox?

Flexbox (Flexible Box Layout) adalah salah satu metode layout pada CSS yang digunakan untuk mengatur posisi dan susunan elemen di dalam sebuah container agar lebih rapi, fleksibel, dan mudah dikelola. Dengan Flexbox, kita dapat menyusun elemen secara horizontal maupun vertikal tanpa harus menggunakan teknik layout lama seperti float atau mengatur posisi elemen secara manual.

Agar sebuah elemen dapat menggunakan Flexbox, kita hanya perlu memberikan properti display: flex pada elemen tersebut.

display: flex;

Setelah sebuah elemen menjadi flex container, seluruh elemen di dalamnya akan berubah menjadi flex items. Mulai dari sini, kita dapat mengatur arah, posisi, jarak, hingga ukuran setiap item menggunakan berbagai properti yang disediakan oleh Flexbox.

Saat ini, Flexbox telah menjadi salah satu teknik layout yang paling banyak digunakan dalam pengembangan website modern. Bahkan, banyak framework CSS seperti Tailwind CSS memanfaatkan konsep Flexbox melalui utility class seperti flex, justify-center, items-center, dan gap-*, sehingga memahami dasar Flexbox akan sangat membantu saat mempelajari framework tersebut.

Mengapa Menggunakan Flexbox?

Sebelum Flexbox diperkenalkan, mengatur tata letak halaman web sering kali menjadi pekerjaan yang cukup rumit. Banyak pengembang menggunakan teknik seperti float, inline-block, atau bahkan tabel (table layout) hanya untuk menyusun elemen agar sejajar. Teknik-teknik tersebut memang dapat digunakan, tetapi kurang fleksibel dan sering kali membutuhkan kode tambahan.

Flexbox hadir untuk menyederhanakan proses tersebut. Dengan hanya beberapa properti CSS, kita dapat mengatur posisi elemen secara horizontal maupun vertikal, memberikan jarak yang konsisten, hingga membuat layout lebih mudah menyesuaikan berbagai ukuran layar.

Beberapa keunggulan Flexbox antara lain:

• Menyusun elemen secara horizontal maupun vertikal dengan mudah.
• Memusatkan elemen tanpa teknik yang rumit.
• Mengatur jarak antar elemen secara konsisten menggunakan gap.
• Membuat layout yang lebih fleksibel dan responsif.
• Mengurangi jumlah kode CSS dibandingkan teknik layout lama.

Karena kemudahan tersebut, Flexbox menjadi salah satu teknik layout yang paling sering digunakan dalam pengembangan website modern dan menjadi dasar bagi banyak framework CSS, termasuk Tailwind CSS.

Cara Kerja Flexbox

Flexbox bekerja dengan konsep container dan item. Sebuah elemen akan berperan sebagai flex container, sedangkan seluruh elemen di dalamnya akan menjadi flex items. Ketika properti display: flex diterapkan pada container, browser akan mulai mengatur tata letak seluruh item menggunakan aturan Flexbox.

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>`

Misalnya kita memiliki struktur HTML seperti berikut.

.container {
    display: flex;
    background-color: #f3f4f6;
    padding: 16px;
}

.item {
    background-color: #3b82f6;
    color: white;
    padding: 12px 20px;
}`

Secara bawaan, Flexbox akan menyusun seluruh item dalam satu baris dari kiri ke kanan. Posisi ini nantinya dapat diubah menggunakan berbagai properti seperti flex-direction, justify-content, dan align-items.

Yang menarik, kita tidak perlu mengatur posisi setiap elemen satu per satu. Cukup mengatur flex container, maka seluruh flex items di dalamnya akan mengikuti aturan yang telah ditentukan. Inilah yang membuat Flexbox jauh lebih sederhana dan efisien dibandingkan teknik layout lama.

Properti Flexbox yang Paling Sering Digunakan

Flexbox menyediakan banyak properti untuk mengatur tata letak elemen. Namun, dalam praktiknya hanya beberapa properti yang paling sering digunakan. Dengan memahami properti-properti berikut, kamu sudah dapat membuat berbagai layout website, mulai dari navbar, card, hingga hero section.

display: flex

Mengubah sebuah elemen menjadi flex container, sehingga seluruh elemen di dalamnya akan mengikuti aturan Flexbox.

flex-direction

Menentukan arah penyusunan item, misalnya secara horizontal (row) atau vertikal (column).

justify-content

Mengatur posisi item pada sumbu utama (main axis), seperti rata kiri, tengah, kanan, atau memberikan jarak yang merata antar item.

align-items

Mengatur posisi item pada sumbu silang (cross axis), misalnya membuat seluruh item berada di tengah secara vertikal.

gap

Memberikan jarak antar item tanpa perlu menggunakan margin, sehingga kode menjadi lebih bersih dan mudah dibaca.

Contoh penggunaan beberapa properti Flexbox:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

Pada contoh di atas, seluruh item akan disusun secara horizontal, memiliki jarak yang merata, berada di tengah secara vertikal, serta memiliki jarak antar elemen sebesar 16 piksel.

Contoh Sederhana Flexbox

Setelah memahami konsep dasar dan beberapa properti yang sering digunakan, sekarang saatnya melihat contoh sederhana penggunaan Flexbox. Pada contoh berikut, tiga buah kotak akan disusun secara horizontal dengan jarak yang sama dan berada di tengah secara vertikal.

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>`

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background-color: #f3f4f6;
}

.item {
    padding: 12px 20px;
    background-color: #3b82f6;
    color: white;
    border-radius: 8px;
}`

Hasilnya, ketiga elemen akan tersusun dalam satu baris dengan jarak yang rapi. Berkat Flexbox, kita tidak perlu lagi menggunakan teknik seperti float atau menghitung posisi setiap elemen secara manual. Berikut hasilnya:

Kesimpulan

Flexbox adalah salah satu metode layout pada CSS yang memudahkan kita dalam mengatur posisi dan susunan elemen di dalam sebuah container. Dengan konsep yang sederhana namun fleksibel, Flexbox dapat digunakan untuk membuat berbagai jenis layout, mulai dari navbar, card, hero section, hingga berbagai komponen antarmuka lainnya.

Pada artikel ini, kita telah mempelajari pengertian Flexbox, alasan mengapa Flexbox digunakan, cara kerjanya, beberapa properti yang paling sering digunakan, serta contoh sederhana penerapannya. Meskipun masih banyak properti lain yang tersedia, memahami dasar-dasar Flexbox sudah menjadi bekal yang sangat baik untuk mulai membangun layout website yang lebih rapi dan responsif.

Jika kamu sudah memahami Flexbox, langkah berikutnya yang bisa dipelajari adalah CSS Grid untuk membuat layout yang lebih kompleks, atau mulai menerapkan Flexbox pada proyek nyata seperti membuat navbar, halaman landing, maupun dashboard.