Flex Item

Flex Item ⚙️

Setelah memahami cara mengatur container, kini saatnya belajar property yang diterapkan langsung pada item (elemen anak) untuk mengontrol bagaimana masing-masing item berperilaku di dalam flex container.

flex-grow — Kemampuan Tumbuh

Menentukan seberapa besar item boleh tumbuh untuk mengisi ruang yang tersisa. Nilainya adalah angka (proporsi):

.container { display: flex; }

.item-a { flex-grow: 1; } /* dapat 1 bagian ruang sisa */
.item-b { flex-grow: 2; } /* dapat 2 bagian ruang sisa */
.item-c { flex-grow: 1; } /* dapat 1 bagian ruang sisa */

/* Total: 4 bagian. A=25%, B=50%, C=25% dari ruang sisa */

Nilai default flex-grow: 0 — item tidak tumbuh.

flex-shrink — Kemampuan Menyusut

Menentukan seberapa besar item boleh menyusut jika ruang tidak cukup:

.sidebar { flex-shrink: 0; } /* tidak boleh menyusut sama sekali */
.konten  { flex-shrink: 1; } /* boleh menyusut (default) */
.penting { flex-shrink: 2; } /* menyusut 2x lebih cepat */

Nilai default flex-shrink: 1 — item boleh menyusut.

flex-basis — Ukuran Dasar

Menentukan ukuran awal item sebelum ruang sisa dibagikan. Bisa berupa nilai pixel, persen, atau auto:

.item { flex-basis: 200px; }  /* ukuran awal 200px */
.item { flex-basis: 30%; }    /* ukuran awal 30% dari container */
.item { flex-basis: auto; }   /* ukuran berdasarkan konten (default) */

Shorthand flex

Gabungan dari flex-grow, flex-shrink, dan flex-basis:

/* flex: grow shrink basis */
.item { flex: 1 1 auto; }   /* tumbuh, menyusut, basis auto */
.item { flex: 1; }          /* sama dengan: flex: 1 1 0 */
.item { flex: 0 0 200px; }  /* ukuran tetap 200px */
.item { flex: none; }       /* sama dengan: flex: 0 0 auto */

Pola yang paling sering dipakai:

/* Semua item sama lebar, mengisi penuh container */
.item { flex: 1; }

/* Item ini ukuran tetap, tidak tumbuh tidak menyusut */
.sidebar { flex: 0 0 240px; }

/* Item ini mengisi sisa ruang */
.main { flex: 1; }

order — Urutan Tampilan

Mengubah urutan visual item tanpa mengubah HTML. Nilai default adalah 0 — semakin kecil, semakin awal tampil:

.item-a { order: 2; }
.item-b { order: 3; }
.item-c { order: 1; } /* tampil pertama meski di HTML terakhir */

/* Tampil: [C] [A] [B] */

Sangat berguna untuk responsive design — mengubah urutan di mobile tanpa mengubah HTML:

@media (max-width: 768px) {
  .gambar  { order: 1; } /* gambar tampil pertama di mobile */
  .teks    { order: 2; }
  .sidebar { order: 3; }
}

align-self — Perataan Individual

Meng-override align-items pada container untuk item tertentu saja:

.container {
  display: flex;
  align-items: center; /* default untuk semua item */
}

.item-khusus {
  align-self: flex-end; /* item ini saja yang rata bawah */
}

.item-lain {
  align-self: flex-start; /* item ini saja yang rata atas */
}

Nilai yang tersedia sama dengan align-items: auto, flex-start, flex-end, center, baseline, stretch.

Contoh Praktis — Layout Kartu Produk

<div class="grid">
  <div class="kartu">Produk A</div>
  <div class="kartu">Produk B</div>
  <div class="kartu">Produk C</div>
  <div class="kartu">Produk D</div>
  <div class="kartu">Produk E</div>
</div>

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.kartu {
  flex: 1 1 calc(33.333% - 14px); /* 3 kolom, dikurangi gap */
  min-width: 200px; /* minimum sebelum wrap */
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}

Ringkasan Property Flex Item

💡 Tips: Gunakan flex: 1 pada item yang ingin mengisi ruang sisa secara merata, dan flex: 0 0 <lebar> pada item yang ingin ukurannya tetap (seperti sidebar). Kombinasi keduanya adalah pola layout yang sangat umum di aplikasi web modern. 🚀