Co je Flexbox a jak s ním vycentrujete obsah?

Question

Accepted Answer

**Flexbox** je jednorozměrný systém rozložení — uspořádává položky do jednoho **řádku** nebo **sloupce** a distribuuje místo podél této linie. Je to moderní odpověď na problémy s zarovnáním a odstupem, které dříve vyžadovaly floats a hacky.

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

## Dvě osy

Flexbox má **hlavní osu** (směr, kterým položky proudí) a **křížovou osu** (kolmo). Vlastnosti se s nimi mapují:

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

## Dokonalé vycentrování — slavný případ použití

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

Tyto tři řádky vycentrují podřízený prvek vodorovně i svisle — úkol, který byl notoricky obtížný před Flexboxem.

## Běžné vzory

```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` zahrnují `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Proč je to důležité

Flexbox je každodenní nástroj pro navigační pruhy, skupiny tlačítek, řady karet, vycentrování a jakékoli rozložení "řady položek".

Pochopení modelu hlavní/křížové osy (a toho, že `justify-content`/`align-items` si vyměňují význam, když změníte `flex-direction`) je klíčový mentální model.

Využívejte Flexbox pro 1D rozložení a Grid pro 2D.