Ce este Flexbox și cum centrezi conținut cu ajutorul acestuia?

Question

Accepted Answer

**Flexbox** este un sistem de layout unidimensional — aranjează elementele într-un singur **rând** sau **coloană** și distribuie spațiul de-a lungul acestei linii. Este răspunsul modern la problemele de aliniere și spațiere care înainte necesitau float-uri și trucuri.

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

## Cele două axe

Flexbox are o **axă principală** (direcția în care curg elementele) și o **axă transversală** (perpendiculară). Proprietățile se mapează la ele:

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

## Centrare perfectă — cazul de utilizare faimos

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

Aceste trei linii centrează un copil atât pe orizontală cât și pe verticală — o sarcină care era notorieu de grea înainte de Flexbox.

## Modele comune

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

Opțiunile pentru `justify-content` includ `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## De ce este important

Flexbox este instrumentul zilnic pentru bare de navigare, grupuri de butoane, rânduri de cărți, centrare și orice layout de „linie de elemente