X'inhu Flexbox u kif tintċentra l-kontenut magħhu?

Question

Accepted Answer

**Flexbox** hija sistema ta' tqassim ta' dimensjoni waħda — tarra l-elementi f'ringiela **waħda** jew **kolonna** u tqassam l-ispazju tul dik il-linja. Hija r-risposta moderna għal problemi ta' allinjament u spaċjar li preċedentement iddaħħlu float u hack.

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

## Iż-żewġ assi

Flexbox għandha **ass prinċipali** (id-direzzjoni li fiha jfissru l-elementi) u **ass trasversali** (perpendikulari). Il-proprjetajiet huma mappati għalihom:

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

## Ċentru perfett — il-każ ta' użu famuż

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

Dawn it-tliet linji jċentraw tat-tifel uh orizzontalment u vertikalment — kompitu li kien notorjament diffiċli qabel Flexbox.

## Mudelli komuni

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

L-għażliet `justify-content` jinkludu `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Għaliex hija importanti

Flexbox hija l-għodda ta' kuljum għal navbar, gruppi ta' buttuni, ringieli ta' karti, ċentru, u kwalunkwe tqassim ta' "ringiela ta' elementi".

L-għarfien tal-mudell tal-ass prinċipali/trasversali (u li `justify-content`/`align-items` ibdlu l-kuntest meta tbiddel `flex-direction`) huwa l-mudell mentali ewlieni.

Uża Flexbox għal tqassim 1D u Grid għal 2D.