flexjustify-*items-*

Flexbox

Layout satu dimensi: flex, direction, justify, items, wrap, dan grow/shrink.

Baris 1D: flex & justify

flex mengaktifkan layout satu dimensi. justify-* mengatur sebaran di sumbu utama (horizontal untuk baris), items-* mengatur perataan di sumbu silang (vertikal). Kombinasi flex items-center justify-between gap-4 adalah resep navbar paling klasik.

Baris 1D: flex & justify live

Logo Materi Latihan

Wrap & grow

flex-nowrap (bawaan) membuat item menyempit saat ruang habis; flex-wrap membiarkan mereka turun baris. grow membuat item menyerap sisa ruang — cocok untuk konten utama + sidebar.

Wrap & grow live

grow basis-40

tetap

Decision Rule

Satu dimensi (baris ATAU kolom) → Flexbox. Baris DAN kolom sekaligus → Grid (Modul 7).