Flexbox શું છે અને તમે તેની સાથે સામગ્રીને કેન્દ્રમાં કેવી રીતે મૂકો છો?

Question

Accepted Answer

**Flexbox** એક એક-પરિમાણીય લેઆઉટ સિસ્ટમ છે — તે આઇટમ્સને એક જ **પંક્તિ** અથવા **કૉલમ**માં ગોઠવે છે અને તે લાઇન સાથે જગ્યા વહેંચે છે. તે આધુનિક જવાબ છે સંરેખણ અને અંતર સમસ્યાઓના જેને પહેલાં float અને હ્યુરિસ્ટિક્સની જરૂર હતી.

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

## બે અક્ષ

Flexbox પાસે **મુખ્ય અક્ષ** (આઇટમ્સ કેવી રીતે વહે છે તેની દિશા) અને **ક્રોસ અક્ષ** (લંબરૂપ) છે. ગુણધર્મો તેમને મેપ કરવામાં આવે છે:

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

## પરફેક્ટ કેન્દ્રમાં — પ્રખ્યાત ઉપયોગ કેસ

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

આ ત્રણ લાઇનો બાળકને આડી અને ઉદ્ધર્વ બંને રીતે કેન્દ્રમાં મૂકે છે — એક કાર્ય જે Flexbox પહેલાં કુખ્યાતપણે મુશ્કેલ હતું.

## સામાન્ય ક્રમ

```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` વિકલ્પોમાં `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly` શામેલ છે.

## શા માટે તે મહત્ત્વપૂર્ણ છે

Flexbox નેવિગેશન બાર, બટન જૂથ, કાર્ડ પંક્તિ, કેન્દ્ર અને કોઈપણ "આઇટમ્સની લાઇન" લેઆઉટ માટે રોજિંદું સાધન છે.

મુખ્ય/ક્રોસ અક્ષ મોડેલને સમજવું (અને તે `flex-direction` બદલવા પર `justify-content`/`align-items` અર્થ બદલે છે) મુખ્ય માનસિક મોડેલ છે.

1D લેઆઉટ માટે Flexbox અને 2D માટે Grid વાપરો.