Çfarë është Flexbox dhe si qendrozin përmbajtjen me të?

Question

Accepted Answer

**Flexbox** është një sistem i paraqitjes njëdimensional — rregullon elementet në një **rresht** ose **kolonë** të vetme dhe shpërndan hapësirën përgjatë asaj linje. Është përgjigja moderne ndaj problemeve të shtrirjes dhe hapësirës që dikur kërkonte zhvendosje dhe mashtrime.

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

## Dy akset

Flexbox ka një **bosht kryesor** (drejtimi në të cilin rrjedhin elementet) dhe një **bosht tërthor** (pingul). Vetitë hartëzohen me to:

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

## Qendrimi i përsosur — rasti i famshëm i përdorimit

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

Këto tre rreshta qendrojnë fëmijën horizontalisht dhe vertikalisht — një detyrë që ishte jashtëzakonisht e vështirë para Flexbox.

## Modele të zakonshme

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

Opcionet `justify-content` përfshijnë `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Pse është e rëndësishme

Flexbox është mjeti i përditshëm për shiritat e navigimit, grupet e butonave, rreshtat e kartës, qendrim dhe ndonjë paraqitje "rreshti elementesh".

Kuptimi i modelit të boshtit kryesor/tërthor (dhe se kuptimi i `justify-content`/`align-items` ndryshohet kur ndryshon `flex-direction`) është modeli mendor kyç.

Përdor Flexbox për paraqitjet 1D dhe Grid për 2D.