Kaj je Flexbox in kako z njim centriraš vsebino?

Question

Accepted Answer

**Flexbox** je enorazsežni sistem za razporeditev — razporedi predmete v eni **vrstici** ali **stolpcu** in razporedi prostor vzdolž te črte. To je sodobni odgovor na probleme poravnave in razporeditve, ki so prej zahtevali lebdeče elemente in trike.

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

## Obe osi

Flexbox ima **glavno os** (smer, v kateri se predmeti razporejevajo) in **prečno os** (pravokotna). Lastnosti se nanašajo na njih:

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

## Popolna centralizacija — znameniti primer uporabe

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

Te tri vrstice centrirajo otrokov element tako vodoravno kot navpično — nalogo, ki je bila pred Flexboxom izjemno težavna.

## Običajni vzorci

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

Možnosti `justify-content` vključujejo `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Zakaj je to pomembno

Flexbox je vsakodnevno orodje za navigacijske vrstice, skupine gumbov, vrstice kartic, centralizacijo in katero koli razporeditev "vrstice predmetov".

Razumevanje modela glavne/prečne osi (in da se pomena `justify-content`/`align-items` zamenjata, ko spremeniš `flex-direction`) je ključni miselni model.

Uporabi Flexbox za 1D razporeditve in Grid za 2D.