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