Digital Transformation
Flexbox (CSS Flexible Box Layout)
TL;DR: Flexbox adalah modul layout CSS satu dimensi yang menyusun elemen dalam baris atau kolom. Cocok untuk navigasi, kartu, dan komponen kecil di mana kontrol perataan dan distribusi ruang lebih penting daripada struktur dua dimensi.
Apa itu Flexbox?
Flexbox kependekan dari Flexible Box Layout, sebuah modul CSS yang dirancang untuk mengatur tata letak elemen dalam satu sumbu, horizontal atau vertikal. Berbeda dengan layout tradisional yang sering bergantung pada float dan positioning, Flexbox memberikan kontrol langsung atas distribusi ruang, perataan, dan urutan tampilan. Modul ini menjadi standar di hampir semua website bisnis modern karena dukungannya yang luas dan sintaksnya yang ringkas.
Analoginya sederhana. Bayangkan rak buku dengan beberapa buku berbeda ukuran. Flexbox memungkinkan kamu memutuskan apakah buku-buku itu rata kiri, rata tengah, atau memiliki jarak yang merata di antara mereka, tanpa perlu mengukur lebar setiap buku secara manual.
Properti Utama
| Properti | Tujuan | Contoh nilai |
|---|---|---|
display: flex | Mengaktifkan flex container | flex, inline-flex |
flex-direction | Menentukan sumbu utama | row, column |
justify-content | Perataan di sumbu utama | flex-start, space-between |
align-items | Perataan di sumbu silang | center, stretch |
gap | Jarak antar item | 16px, 1rem |
flex | Shorthand grow, shrink, basis | 1 1 auto, 0 0 200px |
Properti gap adalah penambahan yang relatif baru (dukungan luas sejak 2021) dan menghilangkan kebutuhan margin negatif yang sebelumnya umum dipakai.
Kenapa Penting?
Untuk marketer dan pebisnis Indonesia yang membangun landing page, Flexbox menyederhanakan banyak masalah klasik: menengahkan tombol CTA, menyamakan tinggi kartu produk, atau menyusun ikon sosial media dengan jarak yang konsisten. Dari pengalaman membangun beberapa landing client dalam dua tahun terakhir, mayoritas komponen UI yang dipakai berulang, navbar, footer, kartu testimoni, semua dibangun dengan Flexbox karena lebih ringkas daripada CSS Grid untuk kasus satu dimensi.
Pertanyaan Umum
Apa bedanya Flexbox dengan CSS Grid?
Flexbox adalah layout satu dimensi (baris atau kolom). CSS Grid adalah layout dua dimensi (baris dan kolom bersamaan). Keduanya saling melengkapi, bukan saling menggantikan.
Apakah Flexbox didukung semua browser?
Ya. Per 2026, Flexbox didukung di lebih dari 99% browser aktif menurut Can I Use. Tidak perlu polyfill untuk proyek baru.
Istilah Terkait