Container ngatur "ruang", item-item ngatur "diri sendiri" di ruang itu. Setelah kuasai property container (justify, align, wrap), saatnya pegang kontrol per-item: flex-grow (boleh ngembang seberapa banyak?), flex-shrink (boleh nyusut sejauh apa?), flex-basis (ukuran awal sebelum disesuain), dan order (geser urutan tanpa ngubah HTML).

🤔 Pola layout sidebar paling sering. Sidebar flex: 0 0 250px (gak grow, gak shrink, fixed 250px) + content flex: 1 (grow penuhin sisa ruang). Resep dasar dashboard yang dipake jutaan website di luar sana — lebih elegant dari grid kalau cuma 2 kolom.

flex-grow — seberapa banyak item boleh membesar untuk mengisi ruang kosong:

.item { flex-grow: 1; }   /* Semua item membesar sama rata */
.item-besar { flex-grow: 2; } /* Item ini 2x lebih besar */

flex-shrink — seberapa banyak item boleh mengecil saat ruang sempit:

.item { flex-shrink: 1; }   /* Boleh mengecil (default) */
.item-tetap { flex-shrink: 0; } /* Tidak boleh mengecil */

flex-basis — ukuran awal item sebelum grow/shrink:

.item { flex-basis: 200px; }   /* Mulai dari 200px */

Shorthand flex — menggabungkan ketiga properti:

.item {
  flex: 1;           /* flex-grow:1, flex-shrink:1, flex-basis:0% */
  flex: 0 0 200px;   /* Tidak grow, tidak shrink, tetap 200px */
}

order — mengubah urutan tampilan item tanpa mengubah HTML:

.item-pertama { order: -1; }  /* Tampil paling awal */
.item-terakhir { order: 99; } /* Tampil paling akhir */

Pola umum layout dengan Flexbox:

.sidebar { flex: 0 0 250px; }  /* Sidebar tetap 250px */
.content { flex: 1; }          /* Konten mengisi sisa ruang */

🎭 Analogi sehari-hari

Flex item properties = bagaimana orang berdiri di lift saat ramai/kosong. flex-grow = "boleh sebar?" (orang gemuk = grow lebih besar). flex-shrink = "boleh nyusut?" (orang tipis ya). flex-basis = "ukuran awal sebelum disesuaikan".

⚠️ Jebakan yang sering ditemui

• flex: 1 shorthand = 1 1 0% — grow, shrink, basis 0. Sangat berbeda dari flex: 1 1 auto (basis content size).
• min-width: 0 perlu untuk text overflow di flex item — default min-width: auto mencegah shrink lebih kecil dari content.
• flex-grow: 0 + sibling ada flex-grow: 1 = item ini tetap fixed.
• order ubah visual urutan tapi NOT focus order (Tab navigation tetap source order). A11y issue.
• flex-basis vs width — basis menang dalam flex container; di luar context flex, irrelevant.
• flex: none = 0 0 auto — tidak grow/shrink. Useful untuk fixed sidebar.

🧪 Tebakan cepat — decode flex shorthand. Tanpa cek docs, tebak nilai grow/shrink/basis untuk:

.a { flex: 1; }
.b { flex: 0 0 250px; }
.c { flex: 2; }
.d { flex: auto; }

Jawaban:

• .a = 1 1 0% (grow=1, shrink=1, basis=0) — dasar membagi rata sisa ruang
• .b = 0 0 250px — fixed 250px, gak grow gak shrink (resep sidebar klasik)
• .c = 2 1 0% — grow 2× lebih besar dari .a
• .d = 1 1 auto — grow + shrink, basis ikut content size

Aturan: flex: 1 ≠ flex: 1 1 auto (basis beda). flex: 1 membagi sisa ruang RATA, flex: 1 1 auto ngitung content size dulu lalu bagi sisa.