Mi az a Flexbox, és hogyan kezelő tartalmat azzal?

Question

Accepted Answer

**Flexbox** egy egydimenziós elrendezési rendszer — egyetlen **sorba** vagy **oszlopba** rendezi az elemeket, és a tér elosztását ezen a vonalon végzi. Ez a modern válasz az igazítási és térközös problémákra, amelyek korábban float-okat és trükköket igényeltek.

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

## A két tengely

A Flexbox-nak van egy **fő tengelye** (az irány, ahogy az elemek áramlanak) és egy **kereszttengelye** (merőleges). A tulajdonságok hozzájuk vannak rendelve:

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

## Tökéletes központosítás — a híres felhasználási eset

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

Ez a három sor vízszintesen és függőlegesen is központosít egy gyereket — egy feladat, amely a Flexbox előtt rendkívül nehéz volt.

## Gyakori minták

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

A `justify-content` lehetőségei közé tartozik a `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Miért fontos

A Flexbox a navigációs sávok, gombcsoportok, kártyasorok, központosítás és bármilyen "elemek sora" elrendezés mindennapi eszköze.

A fő/kereszt tengelymodell megértése (és az, hogy a `justify-content`/`align-items` jelentése megváltozik, amikor megváltoztatja a `flex-direction`-t) a kulcsfontosságú mentális modell.

Használja a Flexbox-ot 1D elrendezéshez és a Grid-et 2D-hez.