Generator Flexbox CSS

Properti container

Properti item

Trik flex: 1

flex: 1 adalah shorthand untuk flex: 1 1 0%. Membuat item:

• Tumbuh untuk mengisi ruang yang tersedia (grow: 1)
• Menyusut jika perlu (shrink: 1)
• Mulai dari ukuran nol (basis: 0%)

Untuk kolom dengan lebar sama, flex: 1 pada setiap item memberi pembagian sempurna. Untuk sidebar yang tidak boleh menyusut di bawah konten, pakai flex: 0 0 240px (tanpa grow, tanpa shrink, basis 240px).

Pola umum

Hero yang dipusatkan

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar dengan logo di kiri, link di kanan

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* dorong ke kanan */
  display: flex;
  gap: 1rem;
}

Baris card responsif

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, minimum 260px sebelum membungkus */
}

Field form dengan tombol (input fleksibel, tombol tetap)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

• Flexbox: satu dimensi (baris ATAU kolom). Terbaik saat ukuran item didorong konten atau saat Anda mendistribusikan ruang sepanjang satu garis.
• Grid: dua dimensi (baris DAN kolom dengan track eksplisit). Terbaik saat layout memiliki struktur baris dan kolom secara bersamaan.

Untuk nav bar atau tumpukan card: Flexbox. Untuk grid card produk dengan beberapa baris card yang sejajar: CSS Grid. Banyak halaman nyata memakai keduanya, layout halaman Grid dengan Flexbox di dalam komponen.

Gotcha umum

• Item tidak mengisi container: default align-items: stretch hanya berlaku jika item tidak memiliki tinggi tetap. Dengan tinggi eksplisit, mereka tetap pada ukuran tersebut.
• gap tidak bekerja: cek dukungan browser. Flex gap muncul terlambat; Safari <14.1 tidak mendukungnya. Sekarang universal di 2024+.
• Anak dari flex kolom collapse: kolom flex memiliki align-items: stretch sebagai default, yang meregangkan item ke lebar container. Jika satu anak menyetel width, ia keluar dari pola.
• order hanya visual: screen reader dan navigasi keyboard mengikuti urutan DOM. Jangan pakai order untuk membuat konten masuk akal; pakai untuk poles visual saja.