लोड हो रहा है...

CSS Flex आइटम

Flex Container पैरेंट को चलाता है। Flex आइटम एक अलग सवाल पूछते हैं: उस पंक्ति या कॉलम में हर बच्चा कैसे बढ़े, सिकुड़े और आकार शुरू करे? रेस्पॉन्सिव flex पैटर्न के पीछे भागने से पहले basis, grow और shrink में माहिर बनें।

Flex आइटम टूलकिट

📊 Flex आइटम एक नज़र में

प्रॉपर्टी	रोज़ का काम
`flex-basis`	खाली जगह बाँटने से पहले मुख्य अक्ष पर शुरुआती आकार
`flex-grow`	यह आइटम बची जगह कितनी लेता है (इकाई-रहित गुणांक)
`flex-shrink`	जगह तंग होने पर यह आइटम कितनी आसानी से सिकुड़ता है
`flex`	grow, shrink और basis का शॉर्टहैंड
`align-self`	एक आइटम के लिए कंटेनर के `align-items` को ओवरराइड करता है
`order`	दृश्य क्रम बदलता है (कम इस्तेमाल करें — DOM/एक्सेसिबिलिटी सही रखें)

basis को मुख्य अक्ष पर आइटम की पसंदीदा शुरुआती लंबाई समझें। फिर grow और shrink बची खाली या कमी वाली जगह पर समझौता करते हैं।

flex-grow — बची जगह लें

1 का गुणांक आइटम को खाली जगह में फैलने देता है। भाई-बहन गुणांक प्रतिस्पर्धा करते हैं: flex-grow: 1 वाले दो आइटम बाकी को बराबर बाँटते हैं।

Growing main column

css

.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — एक आकार से शुरू करें

flex-basis grow/shrink गणना से पहले मुख्य अक्ष का शुरुआती आकार सेट करता है। Flex एल्गोरिद्म के लिए basis को प्राथमिकता दें; width/height अब भी मायने रखते हैं, पर flex का अपना शुरुआती बिंदु basis है।

Sidebar with basis

css

.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — जगह वापस दें

जब पंक्ति बहुत तंग हो, shrink गुणांक तय करते हैं कौन संकुचित होगा। flex-shrink: 0 आइकन या फिक्स्ड रेल को कुचलने से बचाता है।

Protect from squash

css

.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

flex शॉर्टहैंड

flex: grow shrink basis तीनों को पैक करता है। आम शांत डिफ़ॉल्ट: भरने वाले बच्चे के लिए flex: 1 (बढ़ो, सिकुड़ने दो, basis auto); कठोर चिप के लिए flex: 0 0 auto।

Flex shorthand

css

.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — एक आइटम, अलग क्रॉस अलाइनमेंट

एक बच्चे के लिए कंटेनर के align-items को ओवरराइड करें। उपयोगी जब एक बैज शुरुआत पर चिपकना चाहिए जबकि भाई-बहन केंद्र में रहें।

Align-self override

css

.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

एक शांत flex आइटम आदत

इच्छित आकार के लिए पहले basis, फिर grow/shrink गुणांक, फिर साफ़ करने के लिए शॉर्टहैंड। align-self कम इस्तेमाल करें। ऐसे order ट्रिक्स से बचें जो कीबोर्ड और स्क्रीन-रीडर फ्लो बिगाड़ें — और मीडिया-क्वेरी flex पैटर्न Flex Responsive के लिए छोड़ दें।

Named item roles

css

.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

खुद आज़माएँ

main + aside पंक्ति बनाएँ; main को flex-grow: 1 दें।
aside को flex-basis: 14rem और flex-shrink: 0 सेट करें।
एक आइकन को flex-shrink: 0 से बचाएँ।
grow/shrink/basis को flex शॉर्टहैंड से फिर लिखें।
एक बच्चे का क्रॉस अलाइनमेंट align-self से ओवरराइड करें।

आम गलतियाँ

flex-grow आइटम की जगह कंटेनर पर लगाना
width को flex-basis से मिलाना और हैरान होना कि flex गणना क्यों नहीं मिलती
order से क्रम बदलना और टैब/सोर्स क्रम तोड़ना
लोगो कुचलने देना क्योंकि shrink डिफ़ॉल्ट पर रहा
इस पाठ को Flex Responsive मॉड्यूल समझना

सारांश

Flex आइटम grow, shrink और शुरुआती basis नियंत्रित करते हैं
flex-grow खाली जगह बाँटता है; flex-shrink दबाव बाँटता है
flex-basis मुख्य अक्ष पर flex शुरुआती आकार है
flex शॉर्टहैंड और align-self अलग-अलग बच्चों को निखारते हैं
रेस्पॉन्सिव flex पैटर्न अगले हैं; order सावधानी से इस्तेमाल करें

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा