Flexbox

Flexbox (Flexible Box Layout) adalah sistem layout CSS satu dimensi (satu baris atau satu kolom) yang memudahkan pengaturan alignment, spacing, dan distribusi ruang antar item dalam container. Container ditandai dengan display: flex. Property utama pada container: flex-direction (row/column), justify-content (alignment sumbu utama — flex-start, center, space-between), align-items (alignment sumbu silang), flex-wrap (wrap/nowrap). Property pada item: flex-grow (seberapa banyak item bisa tumbuh), flex-shrink (seberapa banyak item bisa mengecil), flex-basis (ukuran awal), order (urutan item). Flexbox ideal untuk: navbar, card layouts, centering elements, sidebar layouts.

Contoh Kode

/* Flexbox untuk navbar */
.navbar {
  display: flex;
  justify-content: space-between; /* Logo kiri, menu kanan */
  align-items: center;            /* Vertically center */
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem; /* Jarak antar link */
  list-style: none;
}

/* Centering dengan Flexbox */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}