Flexbox भनेको के हो र यससँग तपाई सामग्री कसरी केन्द्रित गर्नुहुन्छ?

Question

Accepted Answer

**Flexbox** एक एक-आयामी लेआउट प्रणाली हो — यसले वस्तुहरूलाई एकल **पङ्क्ति** वा **स्तम्भ**मा व्यवस्थित गर्छ र त्यस रेखासँग स्पेस वितरण गर्छ। यो पूर्वमा floats र hacks को आवश्यकता पर्ने पङ्क्तिबद्धता र दूरी समस्याहरूको आधुनिक समाधान हो।n
```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 को एक **main axis** (जसमा वस्तुहरू बग्छन्) र एक **cross axis** (लम्बवत) छ। गुणहरू तिनसँग नक्सा गरिएका छन्:

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

ती तीन लाइनहरूले एक child लाई तेर्सो र ठाडो दुवै दिशामा केन्द्रित गर्छन् — यो एक कार्य जो 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 navbars, button groups, card rows, केन्द्रीकरण, र कुनै पनि "वस्तुहरूको पङ्क्ति" लेआउटको लागि दैनिक उपकरण हो।

main/cross axis मडेल बुझ्न (र यो कि `justify-content`/`align-items` को अर्थ `flex-direction` परिवर्तन गर्दा स्वैप हुन्छ) मुख्य मानसिक मडेल हो।

१D लेआउटको लागि Flexbox र २D को लागि Grid प्रयोग गर्नुहोस्।