फ़्लेक्सबॉक्स जनरेटर

यह कैसे काम करता है

Flexbox जटिल नहीं है, पर इसकी एक बात लगभग सबको चकमा देती है: justify-content और align-items का मतलब क्षैतिज और ऊर्ध्वाधर नहीं है। इनका मतलब दिशा के साथ और दिशा के आर-पार है, और दिशा वह चीज़ है जो आप सेट करते हैं।

जाल, सीधे शब्दों में

flex-direction: row के साथ, justify-content क्षैतिज और align-items ऊर्ध्वाधर काम करता है। column पर जाते ही वे पूरी तरह अदला-बदली हो जाते हैं। flexbox में गँवाया हर घंटा मूलतः यही है। नीचे की व्याख्या दिशा बदलने पर अपडेट होती है ताकि संबंध याद करने की जगह दिखाई दे।

मुख्य अक्ष और क्रॉस अक्ष

मुख्य अक्ष वह है जिसके साथ आइटम बहते हैं, जो flex-direction से तय होता है। क्रॉस अक्ष उसके लंबवत है। justify-content मुख्य अक्ष के साथ जगह बाँटता है; align-items आइटम को क्रॉस अक्ष पर रखता है। जब ये दो नाम बैठ जाएँ, तो बाकी अपने-आप समझ आता है।

gap, और इसने मार्जिन की जगह क्यों ली

gap आइटम के बीच जगह रखता है, बिना पहले और आख़िरी के बाहर जोड़े, जो ठीक वही है जो मार्जिन ग़लत करते हैं और जिसे लोग :last-child की जुगाड़ों से ठीक करते थे। यह हर मौजूदा ब्राउज़र में सपोर्टेड है और इससे बचने का अब कोई कारण नहीं।

nowrap का मतलब सिकुड़ना है, बाहर बहना नहीं

डिफ़ॉल्ट nowrap है, और आइटम नई पंक्ति में जाने की जगह समाने के लिए अपने स्वाभाविक साइज़ से नीचे सिकुड़ते हैं। इसीलिए flex पंक्ति के अंदर टेक्स्ट कभी-कभी अप्रत्याशित रूप से सिकुड़ जाता है। wrap सेट करने से आइटम इसके बजाय नीचे जा सकते हैं; चाइल्ड पर min-width: 0 उसे अपनी सामग्री से आगे सिकुड़ने से रोकता है।

दोनों तरफ़ केंद्र में रखना

align-items: center के साथ justify-content: center किसी आइटम को flex-direction चाहे जो हो, दोनों दिशाओं में केंद्र में रखता है, जो एक ही संयोजन है जिसे सीधे याद कर लेना चाहिए।