Menene Flexbox kuma ta yaya kazo a tsakiyar abubuwan tare da shi?

Question

Accepted Answer

**Flexbox** shima tsarin jimlawa mai girma daya — yana shirya abubuwan a cikin layar **jeri** guda ko **shafi** guda kuma yana rarraba sarari a kan wannan linea. Shi ne sakamakon zamani ga matsalolin daidaita da tazara da aka kasance bukatar floats da yadda-yadda.

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

## Gida biyu

Flexbox yana da **wata mahimmanci** (aljihar da abubuwan ke ragowa) da **gidar wajiya** (gaba daya). Kaddarorin suna zama:

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

## Cikakken tsakiya — sanannen hanyar amfani

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

Wadannan layuka uku suna tsakiya janya duka a jajiya da a tsaye — aiki da ya kasance wahalar gida kafin Flexbox.

## Alamu na yau da kullun

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

`justify-content` zaɓuɓɓuka sun haɗa `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Me yasa aka buƙata

Flexbox shine kayan aiki a yau da kullun don kirjin shiga, ƙungiyoyin buto, jeri na kati, tsakiya, da duk wani jimlawa "jeri na abubuwan".

Jikirin mahimmin tela/gidar wajiya (da `justify-content`/`align-items` sun canja ma'ana lokacin da kuka canja `flex-direction`) shi ne mahimmin yanayin tunani.

Buga Flexbox don jimlawa 1D da Grid don 2D.