CSS Flexbox क्या है?
CSS Flexbox (Flexible Box Layout) एक एक-आयामी लेआउट मॉडल है जो एक पंक्ति या कॉलम में स्थान वितरित करने और आइटम संरेखित करने के लिए उपयोग किया जाता है। flex कंटेनर को display: flex से परिभाषित किया जाता है, और इसके प्रत्यक्ष बच्चे flex आइटम बन जाते हैं। मुख्य कंटेनर गुण: flex-direction (पंक्ति या कॉलम), flex-wrap (एकल बनाम बहु-पंक्ति), justify-content (मुख्य-अक्ष संरेखण), align-items (प्रत्येक पंक्ति के लिए क्रॉस-अक्ष संरेखण), और align-content (कई पंक्तियों का क्रॉस-अक्ष संरेखण)। मुख्य आइटम गुण: flex-grow (आइटम कितना बढ़ता है), flex-shrink (कितना सिकुड़ता है), flex-basis (प्रारंभिक आकार), और align-self (विशिष्ट आइटम के लिए कंटेनर का align-items ओवरराइड करता है)। Flexbox नेविगेशन बार, कार्ड पंक्तियों, केंद्रित लेआउट और किसी भी एक-आयामी व्यवस्था के लिए आदर्श है।
CSS Flexbox जनरेटर का उपयोग कैसे करें
-
ड्रॉपडाउन और इनपुट का उपयोग करके कंटेनर गुणों (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) को समायोजित करें।
-
चुनने के लिए प्रीव्यू में किसी भी आइटम पर क्लिक करें (नारंगी हो जाता है)।
-
आइटम पैनल में चयनित आइटम का flex-grow, flex-shrink, flex-basis और align-self सेट करें।
-
अधिक आइटम जोड़ने के लिए '+ आइटम जोड़ें' पर क्लिक करें; चयनित आइटम हटाने के लिए 'हटाएं' पर क्लिक करें।
-
उत्पन्न कोड देखने के लिए CSS और HTML टैब के बीच स्विच करें, फिर कॉपी करें पर क्लिक करें।
-
डिफ़ॉल्ट 3-आइटम लेआउट के साथ फिर से शुरू करने के लिए 'सब रीसेट करें' पर क्लिक करें।