Memahami CSS Flexbox — Panduan Lengkap dengan Demo Interaktif

CSS Flexbox adalah sistem layout satu dimensi yang mengatur item secara horizontal atau vertikal. Sebelum Flexbox ada, developer harus bergantung pada float, position: absolute, dan hack margin: auto untuk centering sederhana. Sekarang? Cukup beberapa baris CSS yang bisa dibaca manusia normal.

Masalahnya, banyak pemula yang berhenti di display: flex lalu bingung: kenapa justify-content: center kadang menggeser item ke tengah horizontal, kadang vertikal? Kenapa item menyusut sendiri? Kapan pakai flex-grow? Panduan ini menjawab semuanya secara berurutan — dari definisi, dua sumbu, perbedaan justify-content vs align-items, cara centering div, sampai mini-proyek membuat layout halaman lengkap. Ada juga demo interaktif yang bisa kamu mainkan langsung di artikel ini.

Flexbox Adalah… (Definisi dan Kenapa Penting)

Flexbox adalah modul layout CSS satu dimensi (nama resminya CSS Flexible Box Layout) yang mengatur bagaimana item disusun, diberi jarak, dan disejajarkan di dalam sebuah container — dalam satu arah: baris (horizontal) atau kolom (vertikal). Kamu mengaktifkannya dengan satu deklarasi, display: flex, pada elemen pembungkus. Semua browser modern sudah mendukungnya penuh, jadi kamu bisa memakainya tanpa khawatir.

Kata kuncinya adalah satu dimensi. Flexbox berpikir dalam satu garis: deretan tombol, navbar, baris card, kolom sidebar. Kalau kamu butuh mengontrol baris dan kolom sekaligus (misalnya layout majalah atau dashboard), itu wilayahnya CSS Grid — kita bahas perbandingannya nanti.

Untuk paham kenapa Flexbox terasa seperti berkah, lihat cara lama membuat dua kolom sebelum Flexbox:

/* Cara lama (era float) — jangan ditiru */
.sidebar {
  float: left;
  width: 30%;
}
.content {
  float: left;
  width: 70%;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

float sebenarnya dirancang untuk membungkus teks di sekitar gambar, bukan untuk layout. Makanya dulu penuh hack seperti clearfix di atas. Bandingkan dengan versi Flexbox:

/* Cara modern */
.wrapper {
  display: flex;
}
.sidebar {
  flex: 0 0 30%;
}
.content {
  flex: 1;
}

Tidak ada clearfix, tidak ada elemen yang “keluar” dari flow dokumen, dan tinggi kedua kolom otomatis sama. Inilah kenapa Flexbox jadi fondasi hampir semua layout web modern — bahkan utility class seperti flex, justify-center, dan items-center di Tailwind CSS hanyalah pembungkus tipis di atas properti Flexbox yang sama.

Cara Menggunakan Flexbox: Mulai dari display: flex

Cara menggunakan Flexbox adalah dengan memberi display: flex pada elemen pembungkus (container), bukan pada item-itemnya. Begitu container jadi flex container, semua anak langsungnya otomatis menjadi flex item dan langsung berbaris horizontal. Dari situ kamu mengatur tata letak lewat properti di container (flex-direction, justify-content, align-items, gap, flex-wrap) dan properti di item (flex-grow, flex-shrink, flex-basis, align-self, order).

Mari mulai dari contoh paling sederhana:

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

.container {
  display: flex;
  gap: 12px;
  background: #f1f5f9;
  padding: 16px;
}
.item {
  background: #3b82f6;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

Tanpa Flexbox, tiga <div> itu akan menumpuk vertikal (karena div adalah elemen block). Dengan display: flex, ketiganya langsung berjajar horizontal dengan jarak 12px dari properti gap.

Dua istilah ini akan terus muncul, jadi pastikan kamu hafal:

• Flex container — elemen yang diberi display: flex. Semua properti “pengaturan barisan” ada di sini.
• Flex item — anak langsung dari container. Cucu (elemen di dalam item) tidak ikut jadi flex item.

Poin “anak langsung” ini penting. Kalau kamu membungkus item dengan <div> tambahan, pembungkus itulah yang jadi flex item — bukan isi di dalamnya. Ini salah satu sumber kebingungan paling umum saat layout “tidak jalan”. Kalau kamu ingin latihan konsep dasarnya dengan urutan yang terstruktur, materi Flexbox dasar di Hyper Sheets membahasnya lesson per lesson dengan editor langsung di browser.

Dua Sumbu Flexbox dan flex-direction

Setiap flex container punya dua sumbu: main axis (sumbu utama) dan cross axis (sumbu silang), dan flex-direction menentukan arah main axis. Hampir semua kebingungan tentang Flexbox hilang begitu kamu paham dua sumbu ini, karena setiap properti alignment selalu bekerja relatif ke salah satu sumbu — bukan ke “horizontal” atau “vertikal” secara absolut.

Nilai flex-direction ada empat:

.container {
  display: flex;
  flex-direction: row;            /* default: kiri → kanan */
  /* flex-direction: row-reverse;    kanan → kiri */
  /* flex-direction: column;         atas → bawah */
  /* flex-direction: column-reverse; bawah → atas */
}

Konsekuensinya:

Kenapa ini penting? Karena justify-content selalu mengatur main axis dan align-items selalu mengatur cross axis. Saat kamu mengubah flex-direction dari row ke column, kedua sumbu bertukar — dan properti yang tadinya menggeser item secara horizontal tiba-tiba menggesernya vertikal. Bukan propertinya yang berubah perilaku; sumbunya yang berpindah.

Contoh nyata: menu navigasi yang horizontal di desktop dan vertikal di mobile cukup mengganti satu properti:

.menu {
  display: flex;
  flex-direction: column; /* mobile: menu menumpuk ke bawah */
  gap: 8px;
}

@media (min-width: 768px) {
  .menu {
    flex-direction: row; /* desktop: menu berjajar */
    gap: 24px;
  }
}

justify-content vs align-items: Apa Bedanya?

Perbedaan justify-content dan align-items: justify-content mengatur distribusi item di sepanjang main axis, sedangkan align-items mengatur posisi item di cross axis. Pada flex-direction: row (default), artinya justify-content mengatur horizontal dan align-items mengatur vertikal. Pada flex-direction: column, kebalikannya.

Cara menghafal yang paling gampang: justify = jalan utama, align = arah tegak lurusnya. Selama kamu tahu arah main axis (dari flex-direction), kamu selalu tahu properti mana yang harus dipakai.

justify-content — Distribusi di Main Axis

.toolbar {
  display: flex;
  justify-content: space-between; /* tombol kiri & kanan menempel tepi */
}

Perbedaan space-around vs space-evenly sering bikin bingung: pada space-around, jarak antar item terlihat dua kali lebih besar daripada jarak item ke tepi (karena tiap item membawa margin virtualnya sendiri). Kalau kamu mau semua celah identik, pakai space-evenly.

align-items — Posisi di Cross Axis

Catat bahwa default-nya stretch — inilah kenapa card yang berjajar dalam flex container otomatis sama tinggi, salah satu “fitur gratis” Flexbox yang dulu sangat sulit dicapai dengan float.

baseline jarang dibahas tapi sangat berguna: kalau kamu menyejajarkan label kecil dengan angka besar (misalnya “Rp” dan “150.000”), align-items: baseline membuat garis bawah teksnya rapi sejajar, bukan kotaknya.

align-content dan align-self — Dua Sepupu yang Sering Tertukar

Ada dua properti lagi yang mirip namanya:

• align-self — dipasang di item, meng-override align-items untuk satu item saja. Berguna kalau semua item mau center tapi satu tombol mau menempel bawah.
• align-content — hanya berefek kalau ada lebih dari satu baris (yaitu saat flex-wrap: wrap aktif dan item benar-benar turun baris). Ia mengatur jarak antar baris, bukan antar item.

.container {
  display: flex;
  align-items: center;
}
.container .cta {
  align-self: flex-end; /* hanya tombol ini yang turun ke bawah */
}

Teori saja tidak cukup untuk properti-properti ini — kamu harus melihat efeknya. Coba mainkan demo di bawah: ubah flex-direction dari row ke column, lalu perhatikan bagaimana justify-content yang tadinya menggeser item secara horizontal tiba-tiba bekerja vertikal, dan align-items bertukar peran dengannya.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

Kalau kamu ingin eksperimen lebih bebas lagi dengan semua kombinasi properti (termasuk flex-wrap dan align-content), ada playground Flexbox interaktif yang bisa kamu utak-atik tanpa perlu setup apa pun. Dan untuk memperdalam khusus topik alignment, lesson Flexbox alignment membahas kombinasi kedua sumbu dengan latihan bertahap.

Properti Flex Item: flex-grow, flex-shrink, dan flex-basis

flex-grow, flex-shrink, dan flex-basis adalah tiga properti yang menentukan ukuran setiap flex item: flex-basis menetapkan ukuran awal, flex-grow mengatur seberapa banyak item mengambil ruang sisa, dan flex-shrink mengatur seberapa rela item menyusut saat ruang kurang. Ketiganya dipasang di item (bukan container) dan biasanya ditulis lewat shorthand flex.

Mari bedah satu per satu:

.item {
  flex-grow: 0;   /* default: jangan tumbuh mengisi ruang sisa */
  flex-shrink: 1; /* default: boleh menyusut kalau ruang kurang */
  flex-basis: auto; /* default: ukuran awal mengikuti konten/width */
}

• flex-grow — angka perbandingan, bukan piksel. Item dengan flex-grow: 2 mendapat ruang sisa dua kali lipat dibanding item ber-flex-grow: 1. Nilai 0 berarti item tidak ikut memperebutkan ruang sisa.
• flex-shrink — kebalikannya. Saat total lebar item melebihi container, item dengan flex-shrink lebih besar menyusut lebih banyak. flex-shrink: 0 berarti “jangan pernah menyusutkan saya” — berguna untuk ikon atau avatar yang tidak boleh gepeng.
• flex-basis — ukuran awal item di main axis sebelum grow/shrink dihitung. Kalau flex-basis dan width sama-sama di-set, flex-basis yang menang (pada flex-direction: row).

Shorthand yang paling sering kamu temui:

.item-a { flex: 1; }         /* = flex: 1 1 0% — bagi rata ruang */
.item-b { flex: 0 0 250px; } /* ukuran tetap 250px, tak tumbuh tak menyusut */
.item-c { flex: auto; }      /* = flex: 1 1 auto — tumbuh dari ukuran konten */

Perbedaan halus tapi penting: flex: 1 membuat semua item sama lebar persis karena ukuran awalnya dianggap 0 lalu ruang dibagi rata. Sedangkan flex: auto membagi ruang sisa secara rata, jadi item dengan konten lebih panjang tetap lebih lebar. Untuk kolom-kolom yang harus seragam (misalnya tiga card harga), pakai flex: 1.

Contoh praktis — search bar dengan tombol:

.search-bar {
  display: flex;
  gap: 8px;
}
.search-bar input {
  flex: 1;          /* input melar mengisi semua ruang sisa */
  min-width: 0;     /* izinkan menyusut di layar sempit */
}
.search-bar button {
  flex-shrink: 0;   /* tombol tidak boleh gepeng */
}

Ada juga properti order (default 0) untuk mengubah urutan visual item tanpa mengubah HTML — item dengan order lebih kecil tampil lebih dulu. Pakai secukupnya, karena urutan pembacaan screen reader tetap mengikuti HTML. Kalau mau mendalami perilaku grow/shrink dengan kasus-kasus nyata, lesson tentang flex item di Hyper Sheets punya latihan khusus untuk ini.

Cara Centering Div dengan Flexbox

Cara membuat div di tengah (horizontal dan vertikal sekaligus) dengan Flexbox: beri container display: flex; justify-content: center; align-items: center;. Tiga baris ini adalah jawaban modern untuk pertanyaan legendaris “how to center a div” yang dulu butuh hack position: absolute plus transform.

.parent {
  display: flex;
  justify-content: center; /* tengah di main axis (horizontal) */
  align-items: center;     /* tengah di cross axis (vertikal) */
}

Satu syarat yang sering terlewat: container harus punya tinggi. Kalau tinggi container hanya setinggi kontennya, “centering vertikal” tidak terlihat karena tidak ada ruang untuk bergerak. Untuk centering satu layar penuh (misalnya halaman login):

<div class="fullscreen-center">
  <div class="card">
    <h1>Masuk</h1>
    <p>Selamat datang kembali!</p>
  </div>
</div>

.fullscreen-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* kunci: kasih tinggi minimal satu viewport */
}

Alternatif kedua yang layak kamu tahu — margin: auto pada flex item:

.parent {
  display: flex;
  min-height: 100vh;
}
.child {
  margin: auto; /* menyerap semua ruang kosong di keempat sisi */
}

Di dalam flex container, margin: auto “memakan” ruang kosong di sekitar item — hasilnya item terdorong tepat ke tengah. Trik yang sama bisa dipakai sebagian: margin-left: auto pada satu item akan mendorongnya ke ujung kanan, pola klasik untuk tombol “Logout” di navbar tanpa mengubah alignment item lain.

.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.navbar .logout {
  margin-left: auto; /* item ini terdorong ke kanan sendirian */
}

Sebagai perbandingan, di CSS Grid centering bisa lebih singkat lagi (display: grid; place-items: center;), tapi untuk konteks satu dimensi Flexbox tetap pilihan paling natural.

Praktik: Cara Membuat Layout Halaman dengan Flexbox

Cara membuat layout halaman dengan Flexbox: bangun kerangka vertikal (header–main–footer) dengan flex-direction: column, lalu susun bagian dalam tiap seksi dengan flex container horizontal. Di bagian ini kita praktik membuat satu halaman landing sederhana dari nol — navbar, hero, deretan card, dan footer yang selalu menempel di bawah. Ini pola yang sama yang kamu pakai di proyek nyata mana pun.

Kalau kamu belum nyaman menulis struktur HTML-nya, mampir dulu ke panduan belajar HTML untuk pemula — di sini kita fokus ke CSS-nya.

Langkah 1: Struktur HTML

<body>
  <header class="navbar">
    <span class="logo">BelajarWeb</span>
    <nav class="menu">
      <a href="#">Materi</a>
      <a href="#">Blog</a>
      <a href="#">Tentang</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Belajar Web Development</h1>
      <p>Dari nol sampai bisa bikin website sendiri.</p>
      <button>Mulai Sekarang</button>
    </section>

    <section class="cards">
      <article class="card">HTML</article>
      <article class="card">CSS</article>
      <article class="card">JavaScript</article>
    </section>
  </main>

  <footer class="footer">© 2026 BelajarWeb.dev</footer>
</body>

Langkah 2: Kerangka Vertikal + Footer Selalu di Bawah

Masalah klasik: kalau konten halaman pendek, footer “menggantung” di tengah layar. Solusinya — jadikan body flex container vertikal dan biarkan main melar:

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* body minimal setinggi layar */
}
main {
  flex-grow: 1; /* main menyerap semua ruang sisa, footer terdorong ke bawah */
}

Perhatikan mekanismenya: min-height: 100vh memastikan ada ruang untuk dibagi, dan flex-grow: 1 pada main membuatnya mengambil seluruh ruang sisa itu — footer otomatis menempel di dasar, tanpa position: fixed dan tanpa menghitung tinggi manual.

Langkah 3: Navbar — Logo Kiri, Menu Kanan

.navbar {
  display: flex;
  justify-content: space-between; /* logo & menu ke tepi berlawanan */
  align-items: center;            /* sejajar vertikal di tengah */
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
}
.menu {
  display: flex;
  gap: 24px; /* jarak antar link, tanpa margin manual */
}

Ini pola navbar paling umum di dunia: satu flex container dengan space-between untuk memisahkan dua kelompok, dan align-items: center supaya logo dan link sejajar rapi berapa pun tingginya. Menu di kanan sendiri juga flex container — nested flex seperti ini sangat normal dan justru idiomatik.

Langkah 4: Hero — Konten di Tengah

.hero {
  display: flex;
  flex-direction: column;  /* judul, teks, tombol menumpuk vertikal */
  align-items: center;     /* tengah horizontal (cross axis-nya column!) */
  justify-content: center; /* tengah vertikal (main axis-nya column!) */
  text-align: center;
  min-height: 320px;
  gap: 12px;
}

Perhatikan bagaimana perannya bertukar: karena flex-direction: column, yang membuat konten di tengah horizontal justru align-items, dan justify-content mengatur posisi vertikal. Ini persis konsep dua sumbu yang kita bahas — sekarang kamu melihatnya bekerja di kode nyata.

Langkah 5: Deretan Card yang Bisa Turun Baris

.cards {
  display: flex;
  flex-wrap: wrap;  /* izinkan card pindah baris di layar sempit */
  gap: 16px;
  padding: 24px;
}
.card {
  flex: 1 1 240px;  /* ukuran awal 240px, boleh tumbuh & menyusut */
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

Pola flex: 1 1 240px ini layak dihafal: setiap card mulai dari 240px, melar mengisi sisa ruang di baris, dan otomatis turun baris kalau tidak muat. Hasilnya grid card responsif tanpa satu pun media query. Di layar lebar muat tiga kolom, di tablet dua, di HP satu — semuanya diatur oleh Flexbox sendiri.

.footer {
  padding: 16px 24px;
  text-align: center;
  border-top: 1px solid #e2e8f0;
}

Selesai — satu halaman lengkap yang responsif, dibangun hampir seluruhnya dengan Flexbox. Kalau kamu mau melanjutkan proyek kecil ini jadi website utuh yang online, ikuti panduan membuat website pertama sampai tahap deploy.

Flexbox Responsif: flex-wrap dan Media Query

Untuk membuat layout Flexbox responsif, kombinasikan flex-wrap: wrap + flex-basis untuk perilaku otomatis, dan media query untuk perubahan yang lebih terkontrol seperti mengganti flex-direction. Keduanya saling melengkapi, bukan saling menggantikan.

Default flex-wrap adalah nowrap — item akan menyusut terus sampai gepeng daripada pindah baris. Tiga nilainya:

.container {
  flex-wrap: nowrap;       /* default: satu baris, item menyusut */
  /* flex-wrap: wrap;         item turun baris kalau tak muat */
  /* flex-wrap: wrap-reverse; turun baris, tapi barisnya menumpuk ke atas */
}

Pola responsif paling umum kedua adalah membalik arah layout di breakpoint tertentu:

.profile {
  display: flex;
  flex-direction: column; /* mobile-first: foto di atas, bio di bawah */
  gap: 24px;
}

@media (min-width: 768px) {
  .profile {
    flex-direction: row;  /* desktop: foto kiri, bio kanan */
    align-items: flex-start;
  }
}

Mulai dari layout mobile (column), lalu “naikkan” ke row di layar lebar — pendekatan mobile-first yang membuat CSS lebih sederhana. Kalau konsep breakpoint masih asing, materi media queries membahasnya dari nol dengan preview langsung. Dan kalau kamu memakai Tailwind, semua pola di artikel ini punya padanan utility class yang bisa kamu pelajari lewat latihan Flexbox versi Tailwind — atau baca dulu panduan Tailwind CSS untuk gambaran besarnya.

Kesalahan Umum Saat Menggunakan Flexbox

Kesalahan paling umum pemula Flexbox: lupa memberi display: flex pada container, salah memahami pergantian sumbu saat flex-direction: column, dan tidak tahu bahwa min-width: auto mencegah item menyusut. Berikut daftar lengkapnya beserta solusinya — sebagian besar bug layout Flexbox yang akan kamu temui ada di daftar ini.

1. Properti flex dipasang tapi tidak ada display: flex

Semua properti justify-content, align-items, gap, dan kawan-kawan hanya bekerja kalau container-nya display: flex. Kalau layout “tidak ngefek sama sekali”, cek ini dulu di DevTools — 30 detik yang menyelamatkan 30 menit.

2. Properti dipasang di elemen yang salah

justify-content dan align-items milik container; flex-grow dan align-self milik item. Memasang justify-content: center di item tidak melakukan apa-apa. Ingat pembagiannya: container mengatur barisan, item mengatur dirinya sendiri.

3. Bingung sumbu saat flex-direction: column

justify-content: center tiba-tiba tidak membuat konten di tengah horizontal? Kemungkinan besar container-nya column, sehingga justify-content kini bekerja vertikal. Solusi: tanya dulu “main axis-ku ke arah mana?”, baru pilih properti.

4. Item gambar atau teks panjang merusak layout

Flex item punya min-width: auto secara default, artinya item menolak menyusut lebih kecil dari kontennya. URL panjang tanpa spasi atau gambar besar bisa membuat item meledak keluar container. Solusinya:

.flex-item {
  min-width: 0; /* izinkan item menyusut di bawah lebar kontennya */
}
.flex-item img {
  max-width: 100%; /* gambar ikut mengecil */
}

Ini penyebab nomor satu bug “kenapa flex item saya overflow” — dan hampir tidak pernah dibahas di tutorial pemula.

5. Masih pakai margin antar item, bukan gap

gap memberi jarak hanya di antara item — tidak ada margin sisa di tepi, tidak perlu selector :last-child untuk membuang margin terakhir. Lebih bersih, lebih mudah diubah:

/* Hindari */
.item { margin-right: 16px; }
.item:last-child { margin-right: 0; }

/* Pakai ini */
.container { display: flex; gap: 16px; }

6. Lupa flex-wrap sehingga item gepeng di layar kecil

Karena default-nya nowrap, deretan card di layar sempit akan menyusut sampai tidak terbaca, bukan turun baris. Tambahkan flex-wrap: wrap (plus flex-basis yang masuk akal) untuk layout yang lentur.

7. Menghapus outline urutan dengan order tanpa pikir aksesibilitas

order dan row-reverse hanya mengubah urutan visual — pengguna keyboard dan screen reader tetap menavigasi sesuai urutan HTML. Kalau urutan konten memang harus berubah, ubah HTML-nya; pakai order hanya untuk penyesuaian kecil yang tidak mengubah makna.

Flexbox atau CSS Grid: Kapan Pakai yang Mana?

Pakai Flexbox untuk layout satu dimensi (satu baris atau satu kolom): navbar, toolbar, deretan tombol, card row. Pakai CSS Grid untuk layout dua dimensi di mana baris dan kolom harus dikontrol bersamaan: kerangka halaman, galeri foto, dashboard. Keduanya bukan kompetitor — di proyek nyata kamu hampir selalu memakai keduanya sekaligus: Grid untuk kerangka besar halaman, Flexbox untuk komponen di dalamnya.

Aturan praktis yang jarang meleset: kalau kamu mulai memaksa Flexbox menghitung lebar item dengan calc() supaya kolom-kolomnya sejajar antar baris, itu tanda kamu sebenarnya butuh Grid. Sebaliknya, kalau kamu cuma mau menyejajarkan ikon dengan teks di sebelahnya, Grid itu overkill — display: flex; align-items: center; selesai.

Perbandingan lengkap dengan contoh kasusnya sudah kami tulis di Flexbox vs Grid, dan kalau kamu siap belajar Grid dari nol, mulai dari panduan memahami CSS Grid.

FAQ Seputar Flexbox

Apa itu Flexbox dalam CSS?

Flexbox (CSS Flexible Box Layout) adalah sistem layout satu dimensi di CSS untuk menyusun, memberi jarak, dan menyejajarkan elemen dalam satu arah — horizontal atau vertikal. Diaktifkan dengan display: flex pada elemen pembungkus, lalu dikontrol lewat properti seperti flex-direction, justify-content, dan align-items.

Apa bedanya justify-content dan align-items?

justify-content mengatur distribusi item di sepanjang main axis (arah flex-direction), sedangkan align-items mengatur posisi item di cross axis (tegak lurus main axis). Pada flex-direction: row, justify-content = horizontal dan align-items = vertikal; pada column, keduanya bertukar arah.

Bagaimana cara membuat div di tengah dengan Flexbox?

Beri elemen pembungkusnya display: flex; justify-content: center; align-items: center; dan pastikan pembungkus punya tinggi (misalnya min-height: 100vh untuk satu layar penuh). Alternatifnya, beri margin: auto pada item di dalam flex container.

Apakah Flexbox perlu media query untuk responsive?

Tidak selalu. Kombinasi flex-wrap: wrap dan flex-basis (misalnya flex: 1 1 240px) sudah menghasilkan layout yang menyesuaikan lebar layar secara otomatis. Media query tetap berguna untuk perubahan yang lebih besar, seperti mengganti flex-direction dari column ke row di layar lebar.

Apakah Flexbox masih relevan setelah ada CSS Grid?

Sangat relevan. Grid unggul untuk layout dua dimensi (baris + kolom sekaligus), tapi mayoritas kebutuhan layout sehari-hari — navbar, menyejajarkan ikon dengan teks, deretan tombol, footer sticky — adalah masalah satu dimensi yang paling natural diselesaikan Flexbox. Developer profesional memakai keduanya berdampingan.

Apakah semua browser mendukung Flexbox?

Ya, semua browser modern (Chrome, Firefox, Safari, Edge) mendukung Flexbox secara penuh sejak bertahun-tahun lalu, termasuk properti gap di flex container. Kamu bisa memakainya di proyek produksi tanpa fallback khusus, kecuali kamu masih harus mendukung browser yang sudah sangat usang seperti Internet Explorer.

Langkah Selanjutnya

Kamu sekarang sudah pegang fondasi lengkapnya: konsep dua sumbu, perbedaan justify-content vs align-items, kontrol ukuran lewat flex-grow/flex-shrink/flex-basis, resep centering, sampai pola layout halaman utuh. Yang tersisa tinggal satu hal: jam terbang. Flexbox baru benar-benar melekat setelah kamu memakainya berulang-ulang di kasus nyata.

Cara paling menyenangkan untuk menambah jam terbang itu sambil bermain: coba game Kodok Flexbox — kamu memandu kodok ke daun teratai hanya dengan menulis properti Flexbox, level demi level. Kalau sudah tamat dan ingin tantangan menyusun layout yang lebih kompleks, lanjut ke game Mandor Flexbox. Dua game itu diam-diam melatih persis kemampuan yang dipakai sehari-hari sebagai front-end developer.

Setelah Flexbox lancar, gerbang berikutnya adalah CSS Grid untuk layout dua dimensi — mulai dari panduan CSS Grid kami. Selamat ngoding!