Flexbox ni nini na unakosezeaje kwa kuikua sehemu katikati?

Question

Accepted Answer

**Flexbox** ni mfumo wa upangaji wa mwelekeo mmoja — unabajaji vipengele katika **safu** moja au **safu wima** moja na inasambaza nafasi kando ya mstari huo. Ni jibu la kisasa kwa matatizo ya usawa na nafasi ambayo yalikuwa yanahitaji kuelea na tricks.

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

## Shoka mbili

Flexbox ina **shoka kuu** (mwelekeo ambao vipengele vinayotoka) na **shoka-msalaba** (kinyume). Mali zinaunganisha nao:

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

## Kusanya kamili — kesi maarufu ya matumizi

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

Misalaba mitatu hii inakusanya mtoto kwa usawa na wima — kazi ambayo ilikuwa ngumu sana kabla ya Flexbox.

## Mifumo ya kawaida

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

Chaguo za `justify-content` zinajumuisha `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Kwa nini inamaanisha

Flexbox ni zana ya kila siku kwa mabari ya urambazaji, vikundi vya kitufe, safu za kadi, kusanya, na upangaji wowote wa "safu ya vipengele".

Kuelewa mfumo wa shoka kuu/shoka-msalaba (na kwamba maana ya `justify-content`/`align-items` inabadilika unapobadilisha `flex-direction`) ni mfumo muhimu wa akili.

Tumia Flexbox kwa upangaji wa 1D na Grid kwa 2D.