Panduan Lengkap CSS Flexbox: Dari Dasar hingga Pola Lanjutan

CSS Flexbox adalah sistem layout utama dalam pengembangan web modern. Panduan lengkap CSS Flexbox ini mencakup semuanya dari dasar hingga pola lanjutan.

1. Apa itu Flexbox dan kapan menggunakannya

Flexbox adalah model layout satu dimensi untuk mendistribusikan ruang dan menyelaraskan elemen.

/* Use Flexbox when you need: */

/* 1. One-dimensional alignment (row OR column) */
.toolbar { display: flex; gap: 8px; }

/* 2. Content-driven sizing */
.tabs { display: flex; }
.tab { flex: 1; }  /* equal-width tabs */

/* 3. Dynamic ordering */
.card { display: flex; flex-direction: column; }
.card-footer { order: 3; margin-top: auto; }

/* Use CSS Grid instead when you need: */
/* - Two-dimensional control (rows AND columns) */
/* - Layout-driven sizing (template areas) */
/* - Complex page-level layouts */

2. Flex Container: elemen induk

display: flex mengubah anak langsung menjadi flex item.

/* Block-level flex container */
.container {
  display: flex;
}

/* Inline-level flex container */
.inline-container {
  display: inline-flex;
}

/* flex-direction: controls the main axis direction */
.row      { flex-direction: row; }          /* left to right (default) */
.row-rev  { flex-direction: row-reverse; }  /* right to left */
.col      { flex-direction: column; }       /* top to bottom */
.col-rev  { flex-direction: column-reverse; } /* bottom to top */

/* flex-flow: shorthand for direction + wrap */
.container {
  flex-flow: row wrap;
  /* same as: flex-direction: row; flex-wrap: wrap; */
}

3. Sumbu utama vs sumbu silang

Memahami dua sumbu adalah kunci menguasai Flexbox.

/*
 * flex-direction: row (default)
 * ┌──────────────────────────────────────────┐
 * │ ← ← ← ← ← ← MAIN AXIS → → → → → → →  │
 * │                                          │
 * │  ↑   ┌────┐  ┌────┐  ┌────┐             │
 * │  │   │ 1  │  │ 2  │  │ 3  │   CROSS     │
 * │  │   └────┘  └────┘  └────┘   AXIS      │
 * │  ↓                                       │
 * └──────────────────────────────────────────┘
 *
 * flex-direction: column
 * ┌──────────────────┐
 * │ ←CROSS AXIS→     │
 * │                  │
 * │  ↑  ┌────────┐   │
 * │  │  │   1    │   │
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │  MAIN
 * │  │  │   2    │   │  AXIS
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │
 * │  ↓  │   3    │   │
 * │     └────────┘   │
 * └──────────────────┘
 *
 * KEY INSIGHT:
 * - justify-content = main axis
 * - align-items     = cross axis
 * - When flex-direction changes, the axes swap!
 */

4. justify-content: penyelarasan pada sumbu utama

justify-content mengontrol distribusi sepanjang sumbu utama.

.container {
  display: flex;

  /* Pack items to the start (default) */
  justify-content: flex-start;
  /* [1][2][3]                    */

  /* Center items */
  justify-content: center;
  /*         [1][2][3]            */

  /* Pack items to the end */
  justify-content: flex-end;
  /*                    [1][2][3] */

  /* Equal space between items */
  justify-content: space-between;
  /* [1]        [2]        [3]   */

  /* Equal space around items */
  justify-content: space-around;
  /*   [1]     [2]     [3]      */

  /* Equal space everywhere */
  justify-content: space-evenly;
  /*    [1]    [2]    [3]       */
}

5. align-items: penyelarasan pada sumbu silang

align-items mengontrol posisi pada sumbu silang.

.container {
  display: flex;
  height: 200px;

  align-items: stretch;     /* Items fill container height (default) */
  align-items: flex-start;  /* Items at the top */
  align-items: center;      /* Items vertically centered */
  align-items: flex-end;    /* Items at the bottom */
  align-items: baseline;    /* Items aligned by text baseline */
}

/* Override for a single item */
.special-item {
  align-self: center;  /* This item centered, others follow container */
}

/* align-content: controls spacing between LINES (only with wrap) */
.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* lines packed to top */
  align-content: center;        /* lines centered */
  align-content: space-between; /* equal space between lines */
}

6. Properti flex item: grow, shrink, basis

Tiga properti mengontrol bagaimana item berbagi ruang yang tersedia.

/* flex-grow: how much an item GROWS when extra space exists */
.item { flex-grow: 0; }  /* default: don't grow */
.item { flex-grow: 1; }  /* grow to fill available space */
.item { flex-grow: 2; }  /* grow twice as much as flex-grow: 1 items */

/* flex-shrink: how much an item SHRINKS when space is tight */
.item { flex-shrink: 1; }  /* default: shrink proportionally */
.item { flex-shrink: 0; }  /* never shrink (fixed size) */

/* flex-basis: the STARTING SIZE before grow/shrink */
.item { flex-basis: auto; }   /* use content width (default) */
.item { flex-basis: 0; }      /* start from zero, grow equally */
.item { flex-basis: 200px; }  /* start from 200px */
.item { flex-basis: 25%; }    /* start from 25% of container */

/* flex shorthand (recommended) */
.item { flex: 1; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
/* Items grow equally from zero — equal widths */

.item { flex: auto; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: auto */
/* Items grow from content size — proportional widths */

.item { flex: none; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: auto */
/* Items are inflexible — use content width only */

.item { flex: 0 0 200px; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: 200px */
/* Fixed 200px item that never grows or shrinks */

7. Flex Wrap dan layout multi-baris

flex-wrap memungkinkan item berpindah ke baris berikutnya.

.container {
  display: flex;

  flex-wrap: nowrap;        /* default — single line, may overflow */
  flex-wrap: wrap;          /* wrap to next line when needed */
  flex-wrap: wrap-reverse;  /* wrap in reverse order */
}

/* Practical example: responsive card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;   /* grow, shrink, min-width 300px */
  max-width: 400px;  /* cap maximum width */
}
/* Result:
 * Wide screen:  [card] [card] [card] [card]
 * Medium:       [card] [card] [card]
 *               [card]
 * Narrow:       [card]
 *               [card]
 *               [card]
 *               [card]
 */

8. Properti gap

gap menambahkan jarak antar item tanpa margin luar.

.container {
  display: flex;
  flex-wrap: wrap;

  gap: 16px;              /* equal gap in both directions */
  gap: 20px 12px;         /* row-gap: 20px, column-gap: 12px */
  row-gap: 20px;          /* vertical spacing only */
  column-gap: 12px;       /* horizontal spacing only */
}

/* Why gap is better than margins: */

/* Old approach (margins) - awkward edge spacing */
.item { margin: 8px; }
/* Creates 8px margin on ALL sides, including outer edges */
/* Need negative margins on container to compensate */

/* Modern approach (gap) - clean spacing */
.container { display: flex; gap: 16px; }
/* Space ONLY between items, not on outer edges */

9. Pola layout Flexbox umum

Pola Flexbox yang paling sering digunakan dalam proyek nyata.

Perfect Centering

/* Center anything horizontally and vertically */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* or any fixed height */
}

/* Alternative: margin auto trick */
.parent { display: flex; height: 100vh; }
.child  { margin: auto; }  /* centers in both axes */

Navigation Bar

/* Logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

/* Logo left, links center, actions right */
.navbar-3-section {
  display: flex;
  align-items: center;
}
.navbar-3-section .logo    { flex: 1; }
.navbar-3-section .links   { flex: 0; display: flex; gap: 24px; }
.navbar-3-section .actions { flex: 1; display: flex; justify-content: flex-end; }

Sticky Footer

/* Footer stays at bottom even with short content */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header { flex-shrink: 0; }   /* fixed height */
main   { flex: 1; }          /* fills all remaining space */
footer { flex-shrink: 0; }   /* fixed height, stays at bottom */

Sidebar Layout

/* Fixed sidebar + fluid main content */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 280px;  /* fixed 280px, never grow or shrink */
}

.main-content {
  flex: 1;          /* takes remaining space */
  min-width: 0;     /* prevents overflow */
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { flex-basis: auto; }
}

Equal-Height Cards

/* Cards in a row, all same height, button at bottom */
.card-row {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;  /* fills remaining space, pushing footer down */
}

.card-footer {
  margin-top: auto;  /* always at the bottom */
}

10. Flexbox vs CSS Grid

Flexbox dan CSS Grid saling melengkapi.

/* Use BOTH together for best results: */

/* Grid for page layout */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

/* Flexbox for components inside grid areas */
.header {
  grid-area: header;
  display: flex;              /* Flexbox inside Grid */
  justify-content: space-between;
  align-items: center;
}

Pertanyaan yang sering diajukan

Cara memusatkan div dengan Flexbox?

display: flex; justify-content: center; align-items: center; height: 100vh.

Perbedaan flex: 1 dan flex: auto?

flex: 1 tumbuh dari nol, flex: auto dari ukuran konten.

Kenapa flex item saya meluap?

Tambahkan min-width: 0.

Flexbox untuk layout halaman penuh?

Ya, dengan flex-direction: column dan min-height: 100vh.

Dukungan browser untuk Flexbox?

Lebih dari 99% dukungan global.

Flexbox adalah keterampilan penting. Latihan dengan alat kami.