फ्लेक्स आइटम्स

grow, shrink, basis

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

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

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

.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 बदले बिना दृश्य क्रम बदलता है।

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

• flex-shrink
• flex-basis
• flex-grow