Što je Flexbox i kako centrirate sadržaj s njim?

Question

Accepted Answer

**Flexbox** je jednodimenzionalni sustav izgleda — raspoređuje stavke u jedan **red** ili **stupac** i distribuira prostor duž te linije. To je moderni odgovor na probleme poravnanja i razmaka koji su prije zahtijevali floatove i trikove.

```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) */
}
```

## Dvije osi

Flexbox ima **glavnu os** (smjer u kojem teku stavke) i **poprečnu os** (okomito). Svojstva su mapirana na njih:

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

## Savršeno centriranje — čuveni slučaj korištenja

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

Ti tri reda centriraju dijete i vodoravno i okomito — zadatak koji je bio notorno težak prije Flexboxa.

## Česti obrasci

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

Mogućnosti `justify-content` uključuju `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Zašto je to važno

Flexbox je svakodnevni alat za navigacijske trake, grupe gumbiju, redove kartica, centriranje i bilo koji raspored "reda stavki".

Razumijevanje modela glavne/poprečne osi (i da `justify-content`/`align-items` mijenjaju značenje kada promijenite `flex-direction`) je ključni mentalni model.

Koristite Flexbox za 1D rasporede i Grid za 2D.