Flexbox क्या है और आप इसके साथ सामग्री को केंद्र में कैसे रखते हैं?

Question

Accepted Answer

**Flexbox** एक एकदिशीय लेआउट सिस्टम है — यह आइटमों को एक ही **पंक्ति** या **कॉलम** में व्यवस्थित करता है और उस लाइन के साथ स्थान वितरित करता है। यह संरेखण और रिक्ति की समस्याओं का आधुनिक समाधान है जिनके लिए पहले floats और hacks की आवश्यकता होती थी।

```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 का उपयोग करें।