Apa iku Flexbox lan kepiye carane poro konten karo iku?

Question

Accepted Answer

**Flexbox** iku sistem tata letak siji-dimensi — iku ngatur item ing baris **tunggal** utawa **kolom** lan ngirim-nyebar papan ing baris iku. Iku jawaban modern kanggo masalah alignment lan spacing sing biyen mbutuhake float lan 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) */
}
```

## Rong poros

Flexbox nduweni **poros utama** (arah item ngalir) lan **poros silang** (kudhung). Sifat-sifat peta kangga:

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

## Centering sempurna — kasus pamakayan sing terkenal

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

Telu garis iki poro anak loro cara mendatar lan segak — tugas sing notoriusly hard sadurunge Flexbox.

## Pola 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; }
```

Opsi `justify-content` kalebu `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Mengapa iku penting

Flexbox iku piranti saben-dinten kanggo navbar, kelompok tombol, baris kartu, centering, lan sembarang tata letak "baris barang".

Mangerteni model poros utama/silang (lan yen `justify-content`/`align-items` pinisah teges nalika sampeyan ngganti `flex-direction`) iku model mental kunci.

Gunakake Flexbox kangga tata letak 1D lan Grid kangga 2D.