Tutorial CSS Flexbox Lengkap: Kuasai Layout Modern (2026)

Dulu, membuat layout website yang rapi itu sulit. Kita harus menggunakan float, display: table, atau trik-trik aneh lainnya. Namun sejak kedatangan Flexbox (Flexible Box Module), hidup web developer menjadi jauh lebih indah.

Flexbox dirancang khusus untuk mengatur tata letak elemen dalam satu dimensi (baris atau kolom). Dengan Flexbox, kita bisa meratakan elemen di tengah, membagi ruang yang ada secara otomatis, dan mengubah urutan tampilan tanpa mengubah HTML.

Mari kita pelajari konsep dasarnya!

1. Konsep Dasar: Container & Items

Dalam Flexbox, ada dua entitas utama:

• Flex Container (Wadah / Induk): Elemen yang membungkus.
• Flex Items (Anak): Elemen-elemen di dalamnya yang akan diatur.

Untuk mengaktifkan Flexbox, cukup berikan properti ini pada container:

.container {
    display: flex;
}

2. Flex Direction (Arah Aliran)

Secara default, elemen akan berjejer ke samping (kiri ke kanan). Tapi kita bisa mengubahnya:

• row (default): Kiri ke kanan.
• column: Atas ke bawah.
• row-reverse: Kanan ke kiri.
• column-reverse: Bawah ke atas.

3. Justify Content (Perataan Utama)

Properti ini mengatur posisi items di sepanjang sumbu utama (main axis). Jika flex-direction: row, ini mengatur posisi horizontal.

• flex-start: Rata kiri.
• flex-end: Rata kanan.
• center: Rata tengah.
• space-between: Item pertama di kiri, terakhir di kanan, spasi di antara.
• space-around: Spasi di sekeliling item rata.

4. Align Items (Perataan Silang)

Properti ini mengatur posisi items di sumbu silang (cross axis). Jika sumbu utama adalah horizontal, maka ini mengatur vertikal.

• stretch (default): Item ditarik memenuhi tinggi container.
• flex-start: Rata atas.
• flex-end: Rata bawah.
• center: Rata tengah vertikal.

5. Flex Wrap (Bungkus Baris)

Secara default, Flexbox akan memaksa semua items berada dalam satu baris, meskipun harus mengecilkan ukurannya. Jika ingin item turun ke baris baru saat tidak muat, gunakan:

.container {
    flex-wrap: wrap;
}

Ini sangat berguna untuk membuat galeri foto atau kartu artikel yang responsif.

6. Studi Kasus: Membuat Navbar Responsif

Salah satu penggunaan paling populer dari Flexbox adalah membuat menu navigasi (Navbar). Berikut kodenya:

/* CSS */
.navbar {
    display: flex;
    justify-content: space-between; /* Logo dikiri, Menu dikanan */
    align-items: center; /* Vertikal center */
    padding: 1rem 2rem;
}

.menu {
    display: flex;
    gap: 20px; /* Jarak antar menu */
    list-style: none;
}

Hanya dengan beberapa baris kode di atas, Anda sudah bisa membuat layout header yang rapi seperti di website ini!

Tips & Trik Flexbox

• Gunakan gap: 20px; untuk memberikan jarak antar item, lebih mudah daripada mengatur margin item satu per satu.
• Gunakan flex: 1; pada item tertentu agar item tersebut memenuhi sisa ruang yang tersedia (sangat berguna untuk layout sidebar + konten utama).
• Gunakan Chrome DevTools untuk men-debug Flexbox. Anda bisa melihat garis-garis layout secara visual.

Kesimpulan

Flexbox adalah skill wajib bagi web developer modern. Ia menggantikan hampir semua teknik layout kuno. Setelah menguasai ini, Anda bisa lanjut mempelajari CSS Grid untuk layout 2 dimensi yang lebih kompleks.