Flexbox: Wrap, Gap, dan Order

flex-wrap: boleh turun baris?

Secara default (nowrap), flex item dipaksa muat dalam satu baris sampai penyok menyusut. Kalau itemnya terlalu banyak, mereka jadi gepeng.

.galeri {
  display: flex;
  flex-wrap: wrap; /* item turun ke baris baru kalau tidak muat */
}

Dengan wrap, item yang tidak muat turun ke baris berikutnya dengan ukuran normalnya. Ada juga wrap-reverse (baris baru muncul di atas).

align-content: alignment antar baris

Saat ada beberapa baris (karena wrap), align-items mengatur item dalam tiap baris, sedangkan align-content mengatur jarak antar barisnya secara keseluruhan.

.galeri {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* baris-baris disebar vertikal */
}

Nilainya mirip justify-content: flex-start, center, space-between, space-around, stretch. Properti ini tidak berpengaruh kalau cuma ada satu baris.

gap: jarak tanpa margin

.galeri {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* jarak antar item, horizontal dan vertikal */
}

gap memberi jarak antar item tanpa efek samping margin (tidak ada margin ganda di tepi, tidak perlu trik :last-child). Bisa dipisah: row-gap dan column-gap. Properti ini juga berlaku di Grid.

order: susun ulang visual

.kartu {
  display: flex;
}

.kartu img {
  order: 2; /* gambar tampil setelah teks walau di HTML duluan */
}

.kartu .teks {
  order: 1;
}

Semua item default order: 0. Item dengan order lebih kecil tampil duluan. Berguna misal di mobile kamu mau gambar muncul di bawah teks padahal di HTML gambar ditulis duluan.

Catatan teknis: order hanya mengubah tampilan visual, bukan urutan di DOM. Screen reader dan navigasi keyboard (Tab) tetap mengikuti urutan HTML asli. Jangan pakai order buat mengubah urutan yang penting secara makna (misal urutan langkah form), karena pengguna keyboard akan kebingungan.

Contoh: grid kartu responsif sederhana

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

.daftar-kartu .kartu {
  flex: 1 1 250px; /* tumbuh, susut, basis 250px */
}

flex-basis: 250px berarti tiap kartu minimal 250px; kalau tidak muat, turun baris otomatis. Satu pola ini menggantikan banyak kode grid manual.

Rangkuman

flex-wrap mengizinkan baris baru, align-content mengatur jarak antar baris, gap menggantikan margin antar item, dan order menyusun ulang tampilan visual (tapi bukan urutan DOM). Kombinasi wrap + gap + flex-basis adalah fondasi grid kartu responsif.