Apakah Flexbox dan bagaimana anda memusatkan konten dengannya?

Question

Accepted Answer

**Flexbox** ialah sistem tata letak satu dimensi — ia mengatur item dalam satu **baris** atau **lajur** dan mengedarkan ruang di sepanjang garis itu. Ia adalah jawaban moden kepada masalah penyelarasan dan penjarakan yang dahulu memerlukan pelampung dan hack.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## Dua paksi

Flexbox mempunyai **paksi utama** (arah item mengalir) dan **paksi silang** (serenjang). Sifat-sifat memetakannya:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Pemusatan sempurna — kes penggunaan yang terkenal

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Tiga baris ini memusatkan anak secara mendatar dan menegak — tugas yang sangat sukar sebelum Flexbox.

## Corak umum

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

Pilihan `justify-content` termasuk `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Mengapa ia penting

Flexbox ialah alat harian untuk navbar, kumpulan butang, baris kad, pemusatan, dan sebarang tata letak "garis item".

Memahami model paksi utama/silang (dan bahawa `justify-content`/`align-items` menukar makna apabila anda menukar `flex-direction`) ialah model mental utama.

Gunakan Flexbox untuk tata letak 1D dan Grid untuk 2D.