Flex Container

Flex Container 🗂️

Flex container adalah elemen yang memiliki display: flex. Semua property berikut diterapkan pada container (elemen induk) untuk mengatur bagaimana item-item di dalamnya berprilaku.

justify-content — Perataan di Main Axis

Mengatur bagaimana item didistribusikan sepanjang sumbu utama (horizontal jika flex-direction: row):

.container { display: flex; }

.flex-start     { justify-content: flex-start; }     /* kiri (default) */
.flex-end       { justify-content: flex-end; }       /* kanan */
.center         { justify-content: center; }         /* tengah */
.space-between  { justify-content: space-between; }  /* jarak sama, ujung menempel */
.space-around   { justify-content: space-around; }   /* jarak sama, termasuk ujung (setengah) */
.space-evenly   { justify-content: space-evenly; }   /* jarak sama rata termasuk ujung */

Visualisasi:

flex-start:    [A][B][C]__________
center:        ____[A][B][C]______
flex-end:      __________[A][B][C]
space-between: [A]_____[B]_____[C]
space-around:  _[A]___[B]___[C]_
space-evenly:  __[A]__[B]__[C]__

align-items — Perataan di Cross Axis

Mengatur perataan item sepanjang sumbu silang (vertikal jika flex-direction: row):

.stretch    { align-items: stretch; }     /* default: rentangkan mengisi tinggi container */
.flex-start { align-items: flex-start; } /* rata atas */
.flex-end   { align-items: flex-end; }   /* rata bawah */
.center     { align-items: center; }     /* rata tengah vertikal */
.baseline   { align-items: baseline; }   /* rata berdasarkan baseline teks */

Centering sempurna horizontal + vertikal:

.terpusat {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
  height: 100vh;           /* isi penuh viewport */
}

flex-wrap — Pindah Baris Otomatis

Secara default, semua item dipaksa muat dalam satu baris. Dengan flex-wrap, item yang tidak muat akan pindah ke baris berikutnya:

.container {
  display: flex;
  flex-wrap: nowrap;       /* default: semua satu baris */
  flex-wrap: wrap;         /* pindah baris jika tidak muat */
  flex-wrap: wrap-reverse; /* pindah baris, tapi arah terbalik */
}

/* Contoh: grid kartu responsif tanpa media query */
.grid-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.kartu {
  flex: 1 1 280px; /* min 280px, tapi bisa tumbuh */
}

gap — Jarak Antar Item

Menggantikan cara lama menggunakan margin untuk jarak antar item:

.container {
  display: flex;
  gap: 16px;          /* jarak sama di semua arah */
  gap: 16px 24px;     /* row-gap | column-gap */
  row-gap: 16px;      /* jarak antar baris */
  column-gap: 24px;   /* jarak antar kolom */
}

Kelebihan gap dibanding margin: tidak menambah jarak di tepi luar pertama dan terakhir — hanya di antaranya.

align-content — Perataan Multi-Baris

Hanya bekerja ketika flex-wrap: wrap dan ada lebih dari satu baris item:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* semua baris di atas */
  align-content: center;        /* semua baris di tengah */
  align-content: space-between; /* jarak sama antar baris */
  align-content: stretch;       /* baris direntangkan (default) */
}

Shorthand flex-flow

Gabungkan flex-direction dan flex-wrap:

.container {
  flex-flow: row wrap;          /* sama dengan: flex-direction: row; flex-wrap: wrap; */
  flex-flow: column nowrap;
}

Contoh Layout Lengkap

/* Layout halaman dengan sidebar */
.layout {
  display: flex;
  gap: 24px;
  min-height: 100vh;
  align-items: flex-start;
}

.sidebar {
  width: 240px;
  flex-shrink: 0; /* sidebar tidak menyusut */
}

.konten-utama {
  flex: 1; /* mengambil sisa ruang yang ada */
}

Ringkasan Property Flex Container

💡 Tips: Kombinasi justify-content: space-between dan align-items: center adalah pola yang paling sering digunakan untuk navbar — logo di kiri, menu di kanan, keduanya rata tengah secara vertikal. Hafalkan ini! 🎯