हर सामान्य flexbox प्रॉपर्टी, यह बताते हुए कि वह कहाँ लागू होती है: कंटेनर पर या आइटम पर। हर पंक्ति में प्रॉपर्टी के साथ उसके सामान्य मान और काम दिए गए हैं।
फ्लेक्सबॉक्स एलिमेंट्स को एक ही दिशा में सजाता है: एक पंक्ति या एक कॉलम। पैरेंट पर display: flex लगाएँ और वह flex कंटेनर बन जाता है; उसके सीधे चिल्ड्रन flex आइटम बन जाते हैं। कंटेनर की प्रॉपर्टी मेन ऐक्सिस और क्रॉस ऐक्सिस पर बँटवारे को नियंत्रित करती हैं; आइटम की प्रॉपर्टी बताती हैं कि कोई आइटम कितना बढ़ेगा, सिकुड़ेगा या अलाइन होगा। एक-दिशा वाली बार, पंक्तियाँ और सेंटरिंग के लिए फ्लेक्सबॉक्स चुनें।
संदर्भ तालिका · 13 प्रविष्टियाँ
CSS फ्लेक्सबॉक्सExplained
13 of 13 rows
कंटेनर
flex | inline-flex
एलिमेंट को flex कंटेनर बनाती है।
row | column | row-reverse | column-reverse
मेन ऐक्सिस तय करती है जिस पर आइटम बहते हैं।
flex-start | center | space-between | space-around | space-evenly
आइटम्स को मेन ऐक्सिस पर बाँटती है।
stretch | center | flex-start | flex-end | baseline
आइटम्स को क्रॉस ऐक्सिस पर अलाइन करती है।
flex-start | center | stretch | space-between
जब क्रॉस ऐक्सिस पर जगह बचती है तो रैप हुई पंक्तियों को अलाइन करती है।
nowrap | wrap | wrap-reverse
आइटम्स को सिकुड़ने के बजाय नई पंक्तियों पर रैप होने देती है।
0.5rem | 8px 16px
आइटम्स के बीच की जगह, क्षैतिज और ऊर्ध्वाधर।
आइटम
0 | 1 | 2
आइटम अपने सिबलिंग्स की तुलना में कितनी खाली जगह सोख लेता है।
0 | 1
जगह कम पड़ने पर आइटम कितना सिकुड़ता है।
auto | 200px | 50%
खाली जगह बाँटने से पहले का शुरुआती आकार।
1 | 1 0 auto | 0 0 200px
grow shrink basis का शॉर्टहैंड।
auto | center | flex-start | flex-end | stretch
एक आइटम के लिए कंटेनर के align-items को ओवरराइड करती है।