CSS फ्लेक्सबॉक्स लेआउट में फ्लेक्स कंटेनर (पैरेंट) पर लागू होने वाली 6 मुख्य प्रॉपर्टीज़ हैं: फ्लेक्स कंटेनर प्रॉपर्टीज़ प्रॉपर्टीविवरण flex-directionमेन एक्सिस की दिशा (row, column, row-reverse, column-reverse) flex-wrapआइटम्स रैप होंगे या नहीं (nowrap, wrap, wrap-reverse) flex-flowflex-

flex-direction प्रॉपर्टी फ्लेक्स कंटेनर के मेन एक्सिस (मुख्य अक्ष) को परिभाषित करती है, जिससे फ्लेक्स आइटम्स की दिशा निर्धारित होती है। उदाहरण: वर्टिकल (कॉलम) दिशा flex-direction: column से आइटम्स ऊपर से नीचे की ओर व्यवस्थित होते हैं। <!DOCTYPE html> <html> <head> <style>

इमेज पर टेक्स्ट को बॉटम-राइट (नीचे दाएं) कोने में रखने के लिए position: absolute के साथ bottom और right प्रॉपर्टीज़ का उपयोग करें। उदाहरण: इमेज पर बॉटम-राइट टेक्स्ट <!DOCTYPE html> <html> <head> <style> .box { position: relative; display: inline-block;

align-self प्रॉपर्टी किसी एक फ्लेक्स आइटम के क्रॉस-एक्सिस संरेखण को ओवरराइड करती है, भले ही कंटेनर पर align-items कुछ भी सेट हो। उदाहरण: एक आइटम को केंद्र में संरेखित करना कंटेनर में align-items सेट नहीं है (डिफ़ॉल्ट stretch), लेकिन चौथा आइटम align-self: center से केंद्र में है। <!DOCTYPE html&

justify-content: space-around फ्लेक्स कंटेनर के मेन एक्सिस (मुख्य अक्ष) पर फ्लेक्स आइटम्स के चारों ओर समान स्पेस वितरित करता है। प्रत्येक आइटम के बाएं और दाएं समान स्पेस होता है, किनारों पर आधा स्पेस। उदाहरण: space-around के साथ हॉरिजॉन्टल संरेखण <!DOCTYPE html> <html> <head> &

align-content प्रॉपर्टी flex-wrap: wrap होने पर फ्लेक्स लाइन्स के संरेखण (alignment) को नियंत्रित करती है। यह फ्लेक्स लाइन्स के बीच और किनारों पर स्पेस वितरण को संशोधित करती है। उदाहरण: space-between के साथ फ्लेक्स लाइन्स कंटेनर की निश्चित ऊंचाई (150px) है, और फ्लेक्स लाइन्स को space-between से वित

flex-wrap प्रॉपर्टी निर्धारित करती है कि फ्लेक्स आइटम्स एक ही लाइन में रहेंगे या आवश्यकतानुसार कई लाइनों में रैप (wrap) होंगे। उदाहरण: flex-wrap: wrap के साथ रैपिंग कंटेनर की चौड़ाई से अधिक आइटम्स होने पर वे अगली लाइन में चले जाते हैं। <!DOCTYPE html> <html> <head> <style>

align-content: space-around फ्लेक्स कंटेनर में एक से अधिक लाइन होने पर, प्रत्येक फ्लेक्स लाइन के चारों ओर समान स्पेस वितरित करता है। पहली और अंतिम लाइन के किनारों पर भी आधा स्पेस होता है। उदाहरण: space-around के साथ फ्लेक्स लाइन्स flex-wrap: wrap के साथ कई लाइनें बनती हैं, और align-content: space-a

वर्टिकल (लंबवत) बटन ग्रुप बनाने के लिए बटन्स को display: block दें और उन्हें एक कंटेनर में रखें। प्रत्येक बटन नई लाइन पर दिखाई देगा। उदाहरण: वर्टिकल बटन ग्रुप <!DOCTYPE html> <html> <head> <style> .vertical-btn-group { display: flex; flex-direction: column

बटन को डिसेबल्ड (निष्क्रिय) दिखाने के लिए CSS opacity प्रॉपर्टी का उपयोग करें। कम ओपेसिटी (पारदर्शिता) बटन को धुंधला और निष्क्रिय जैसा दिखाती है। उदाहरण: इनेबल्ड और डिसेबल्ड बटन <!DOCTYPE html> <html> <head> <style> .btn { color: black; text-align: center;

इमेज पर टेक्स्ट को बॉटम-लेफ्ट (नीचे बाएं) कोने में रखने के लिए position: absolute के साथ bottom और left प्रॉपर्टीज़ का उपयोग करें। पैरेंट कंटेनर को position: relative होना चाहिए। उदाहरण: इमेज पर बॉटम-लेफ्ट टेक्स्ट <!DOCTYPE html> <html> <head> <style> .box { pos

column-span प्रॉपर्टी किसी एलिमेंट को मल्टी-कॉलम लेआउट में सभी कॉलम में फैलाने (span) की अनुमति देती है। यह मुख्य रूप से हेडिंग्स के लिए उपयोगी है जो सभी कॉलम में फैलने चाहिए। उदाहरण: हेडिंग को सभी कॉलम में फैलाना column-span: all का उपयोग करके <h1> को सभी 4 कॉलम में फैलाया गया है। <!DOCT

column-width प्रॉपर्टी मल्टी-कॉलम लेआउट में प्रत्येक कॉलम की इष्टतम (optimal) चौड़ाई निर्दिष्ट करती है। ब्राउज़र उपलब्ध स्थान के आधार पर कॉलम की संख्या स्वचालित रूप से तय करता है। उदाहरण: 100px कॉलम चौड़ाई के साथ 4 कॉलम यहां column-count: 4 अधिकतम कॉलम संख्या सेट करता है, जबकि column-width: 100px न

columns प्रॉपर्टी column-width और column-count दोनों को एक साथ सेट करने का शॉर्टहैंड है। यह मल्टी-कॉलम लेआउट बनाने के लिए उपयोगी है। उदाहरण: 4 कॉलम, प्रत्येक 100px चौड़ा यह कोड 100px न्यूनतम चौड़ाई वाले अधिकतम 4 कॉलम बनाता है, जिसमें ग्रे रंग की डैश्ड रूल है। <!DOCTYPE html> <html> <

grid-template-rows प्रॉपर्टी CSS ग्रिड कंटेनर में पंक्तियों (rows) की संख्या और ऊंचाई निर्धारित करती है। आप पिक्सेल, प्रतिशत, fr यूनिट, या auto कीवर्ड का उपयोग कर सकते हैं। उदाहरण: दो पंक्तियों वाला ग्रिड यह कोड 70px और 190px ऊंचाई वाली दो पंक्तियाँ बनाता है, जिसमें 20px का गैप है। <!DOCTYPE ht

CSS वेरिएबल्स (कस्टम प्रॉपर्टीज़) आपको अपने वेब पेज पर पुन: प्रयोज्य मानों को परिभाषित करने की अनुमति देते हैं। ये एक कस्टम नाम (जैसे --my-bg-color) से शुरू होते हैं और var() फ़ंक्शन का उपयोग करके एक्सेस किए जाते हैं। उदाहरण: बैकग्राउंड और टेक्स्ट कलर बदलना नीचे दिए गए कोड में हम :root स्यूडो-क्लास

font-size से पेजिनेशन आकार बदलें पेजिनेशन का आकार बदलने के लिए font-size प्रॉपर्टी का उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <style> .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; te

फ्लेक्स आइटम सिकोड़ें flex-shrink प्रॉपर्टी फ्लेक्स-आइटम को सिकोड़ती है। उदाहरण निम्न कोड में Q4 फ्लेक्स-आइटम पर flex-shrink:0 लागू किया गया है: <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: orange; }

CSS ग्रिड लेआउट में ग्रिड रो (Grid Rows) क्षैतिज (हॉरिजॉन्टल) ट्रैक्स होते हैं जो ग्रिड कंटेनर में ग्रिड आइटम्स को पंक्तियों में व्यवस्थित करते हैं। grid-template-rows प्रॉपर्टी से रो की संख्या और आकार परिभाषित किए जाते हैं। ग्रिड रो परिभाषित करना grid-template-rows: 100px 200px auto - 3 रो: पहल

CSS ग्रिड लेआउट में ग्रिड गैप (Grid Gaps) ग्रिड ट्रैक्स (रो और कॉलम) के बीच की जगह को संदर्भित करता है। यह ग्रिड आइटम्स के बीच दृश्यात्मक अलगाव प्रदान करता है और लेआउट को पठनीय बनाता है। ग्रिड गैप प्रॉपर्टीज row-gap / grid-row-gap: रो (पंक्तियों) के बीच गैप column-gap / grid-column-gap: कॉलम (