# फ्लेक्स आइटम्स — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-flex-items

> व्यक्तिगत बच्चे कैसे बढ़ें, सिकुड़ें, और पुनः-क्रमित हों — इसे नियंत्रित करें।

## grow, shrink, basis

`flex-grow` आइटम कितनी अतिरिक्त जगह लेता है, `flex-shrink` जगह कम होने पर कितना सिकुड़ता है, `flex-basis` उसका शुरुआती आकार। `flex: 1`, `1 1 0%` का शॉर्टहैंड है — "जगह बराबर बाँटें"।

## बराबर चौड़ाई के कॉलम

हर `.col` उपलब्ध जगह को बराबर भरने के लिए बढ़ता है।

```css
.row { display: flex; gap: 16px; }
.col { flex: 1; }
.col.wide { flex: 2; }   /* takes twice the space */
```

## align-self और order

`align-self` एक आइटम के लिए कंटेनर के `align-items` को ओवरराइड करता है। `order` HTML बदले बिना दृश्य क्रम बदलता है।

**Quiz:** कौन-सी प्रॉपर्टी नियंत्रित करती है कि फ्लेक्स आइटम अतिरिक्त जगह भरने के लिए कितना बढ़े?

- [ ] flex-shrink
- [ ] flex-basis
- [x] flex-grow

*Answer:* flex-grow. flex-grow तय करता है कि बची हुई जगह आइटम के बीच कैसे बँटे।