Co to jest Flexbox i jak wyśrodkowujesz zawartość za jego pomocą?

Question

Accepted Answer

**Flexbox** to jednowymiarowy system layoutu — rozmieszcza elementy w jednym **wierszu** lub **kolumnie** i dystrybuuje przestrzeń wzdłuż tej linii. To nowoczesna odpowiedź na problemy z wyrównaniem i spacingiem, które kiedyś wymagały floatów i hacków.

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

## Dwie osie

Flexbox ma **oś główną** (kierunek przepływu elementów) i **oś poprzeczną** (prostopadłą). Właściwości mapują się na nich:

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

## Perfekcyjne wyśrodkowanie — słynny przypadek użycia

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

Te trzy linie wyśrodkowują dziecko zarówno poziomo jak i pionowo — zadanie, które było notorycznie trudne przed Flexboxem.

## Popularne wzorce

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

Opcje `justify-content` obejmują `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Dlaczego to ważne

Flexbox to codzienne narzędzie do pasków nawigacyjnych, grup przycisków, rzędów kart, wyśrodkowania i dowolnego layoutu "linii elementów".

Zrozumienie modelu osi głównej/poprzecznej (i tego, że `justify-content`/`align-items` zamieniają znaczenie, gdy zmienisz `flex-direction`) to kluczowy model mentalny.

Używaj Flexboxa dla layoutów 1D i Grid dla 2D.