CSS फ्लेक्सबॉक्स (Flexible Box Layout Module) एक-आयामी (1D) लेआउट मॉडल है जो कंटेनर में आइटम्स के बीच स्थान वितरण और संरेखण को शक्तिशाली तरीके से नियंत्रित करता है। यह रिस्पॉन्सिव डिज़ाइन का आधार है।
फ्लेक्स कंटेनर प्रॉपर्टीज़ (पैरेंट पर)
| प्रॉपर्टी | कार्य |
|---|
flex-direction | मेन एक्सिस दिशा: row, column, row-reverse, column-reverse |
flex-wrap | रैप व्यवहार: nowrap, wrap, wrap-reverse |
flex-flow | direction + wrap शॉर्टहैंड |
justify-content | मेन एक्सिस पर संरेखण/स्पेस वितरण |
align-items | क्रॉस एक्सिस पर आइटम्स संरेखण (सिंगल लाइन) |
align-content | क्रॉस एक्सिस पर लाइन्स संरेखण (मल्टी-लाइन) |
gap / row-gap / column-gap | आइटम्स के बीच स्पेस (मॉडर्न) |
फ्लेक्स आइटम प्रॉपर्टीज़ (चाइल्ड पर)
| प्रॉपर्टी | कार्य |
|---|
order | दृश्य क्रम (डिफ़ॉल्ट 0) |
flex-grow | अतिरिक्त स्थान में हिस्सा |
flex-shrink | स्थान कम होने पर सिकुड़ना |
flex-basis | प्रारंभिक आकार |
flex | grow/shrink/basis शॉर्टहैंड |
align-self | व्यक्तिगत क्रॉस-एक्सिस संरेखण |
बेसिक फ्लेक्स कंटेनर
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 20px;
}
फ्लेक्सबॉक्स vs ग्रिड
| फ्लेक्सबॉक्स | CSS ग्रिड |
|---|
| एक-आयामी (रो या कॉलम) | दो-आयामी (रो + कॉलम) |
| कंटेंट-फर्स्ट लेआउट | लेआउट-फर्स्ट डिज़ाइन |
| नेवबार, कार्ड, फॉर्म | पेज लेआउट, डैशबोर्ड, गैलरी |
