Flexbox संपादक

Flexbox विज़ुअल एडिटर क्या है?#

Flexbox तत्वों को एक ही दिशा (पंक्ति या कॉलम) के साथ व्यवस्थित करने और उनके बीच के मुक्त स्थान को वितरित करने वाला CSS लेआउट इंजन है। यह उन प्रश्नों का उत्तर देता है जिनके लिए पहले फ़्लोट, ऋणात्मक मार्जिन, और परीक्षण-एवं-त्रुटि चाहिए होते थे: “इसे लंबवत कैसे केंद्रित करूँ?”, “इन तीन कॉलम को समान ऊँचाई कैसे बनाऊँ?”, “एक आइटम को सुदूर दायें कैसे धकेलूँ जबकि बाकी बायें रहें?”। एक बार समझने पर, आप यह लगभग हर पृष्ठ पर उपयोग करते हैं; तब तक, गुण नाम (justify-content, align-items, flex-grow) अनुभवी डेवलपर्स को भी ठोकर देते हैं, क्योंकि विनिर्देश सामान्य अंग्रेज़ी शब्दों को बहुत सटीक लेआउट अर्थ से अतिभारित करता है।

यह पृष्ठ एक लाइव Flexbox प्लेग्राउंड है। आप बायें साइडबार में कंटेनर गुण और प्रति-आइटम ओवरराइड ट्यून करते हैं; दायाँ पेन तुरंत परिणाम दिखाता है और वह सटीक, कॉपी-पेस्ट-के-लिए-तैयार CSS लिखता है जिसने वह बनाया। इसका मतलब है यह अनुमान लगाना बंद करना कि कौन-सा मान क्या करता है और इसके बजाय बदलाव के क्षण ही प्रभाव देखना — फिर वह नियम कॉपी करना जिसने काम किया।

इसका उपयोग कैसे करें#

लेआउट नियंत्रण के एक साइडबार और पूर्वावलोकन + CSS आउटपुट पैनल में विभाजित है।

1. कंटेनर सेट करें। साइडबार में ड्रॉपडाउन का उपयोग करें:
   • दिशा — row, row-reverse, column, column-reverse।
   • जस्टिफ़ाई कंटेंट — मुख्य अक्ष के साथ मुक्त स्थान वितरित करता है: flex-start, center, flex-end, space-between, space-around, space-evenly।
   • आइटम अलाइन — बच्चों को अनुप्रस्थ अक्ष के साथ व्यवस्थित करता है: stretch, flex-start, center, flex-end, baseline।
   • रैप — nowrap सब कुछ एक पंक्ति पर रखता है; wrap और wrap-reverse बच्चों को नई पंक्तियों में बहने देते हैं।
   • कंटेंट अलाइन — केवल रैपिंग चालू होने पर दिखता है; यह रैप्ड बच्चों की पंक्तियों को दूर करता है।
   • गैप — 0 से 64 px तक का स्लाइडर; लाइव मान लेबल के बगल में पढ़ा जाता है।
2. आइटम प्रबंधित करें। आइटम शीर्षक के अंतर्गत, आइटम जोड़ें एक और flex बच्चा जोड़ता है। हर आइटम पंक्ति ग्रो, श्रिंक, बेसिस, क्रम, और स्व-अलाइन (कंटेनर के align-items का प्रति-बच्चा ओवरराइड) उजागर करती है। किसी बच्चे को उसके हटाएँ बटन से हटाएँ।
3. पूर्वावलोकन देखें। दाईं ओर का बड़ा बॉक्स एक वास्तविक flex कंटेनर है — हर बदलाव तुरंत पुनः चित्रित करता है।
4. CSS कॉपी करें। उत्पन्न नियम ब्लॉक पूर्वावलोकन के नीचे है। इसे लेने हेतु कॉपी क्लिक करें। जब सभी आइटम समान मान साझा करते हैं, एकल .item ब्लॉक उत्सर्जित होता है; जैसे ही कोई आइटम भिन्न होता है, आउटपुट प्रति बच्चा एक .item:nth-child(N) ब्लॉक पर स्विच करता है ताकि हर ओवरराइड स्पष्ट रहे।

मुख्य विशेषताएँ#

• कंटेनर और प्रति-बच्चा गुण एक ही जगह। Flexbox के बारे में कुछ भी छिपा हुआ नहीं — flex-direction, दोनों अलाइनमेंट अक्ष, रैपिंग, gap, और प्रति-आइटम grow/shrink/basis/order/align-self सभी लाइव हैं।
• सही, न्यूनतम CSS आउटपुट। align-content केवल तब उत्सर्जित होता है जब रैपिंग वास्तव में चालू हो (एकल पंक्ति पर यह कुछ नहीं करता); समान आइटम एक ब्लॉक में सिकुड़ते हैं; order और align-self केवल गैर-डिफ़ॉल्ट होने पर दिखते हैं। आउटपुट सबसे छोटा नियम है जो आप जो देखते हैं उसे पुनः उत्पन्न करता है।
• flex शॉर्टहैंड, सही ढंग से। हर बच्चा flex: <grow> <shrink> <basis> के रूप में क्रमानुसारित होता है — वह विहित तीन-मान रूप जो शॉर्टहैंड के छूटे हुए मानों के आश्चर्यजनक डिफ़ॉल्ट से बचता है।
• बेसिस वैध की जाती है। auto, 0, 200px, 50%, या 10rem टाइप करें और स्वीकार्य है; अमान्य बेसिस चिह्नित होती है और चुपचाप टूटा CSS बनाने के बजाय auto पर वापसी करती है।
• पूर्वावलोकन बायें-से-दायें पर बाध्य। Flexbox का row बायें-से-दायें सिमेंटिक्स के रूप में परिभाषित है, इसलिए पूर्वावलोकन पृष्ठ भाषा की परवाह किए बिना LTR पर पिनन्ड है — जो आप देखते हैं वही आपका स्टाइलशीट करेगा।

विस्तृत उदाहरण#

एक सामान्य लेआउट: एक हेडर पंक्ति जिसमें बायें पिनन्ड लोगो, शेष स्थान लेने वाला शीर्षक, और दायें पिनन्ड क्रिया — एक निश्चित गैप के साथ समान रूप से दूर।

• दिशा: row
• जस्टिफ़ाई कंटेंट: space-between
• आइटम अलाइन: center
• रैप: nowrap
• गैप: 16px
• आइटम: तीन बच्चे, मध्य वाले का ग्रो 1 ताकि वह मुक्त स्थान सोख ले, बाकी डिफ़ॉल्ट flex: 0 1 auto पर।

उत्पन्न CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

क्योंकि दूसरा बच्चा बढ़ता है और बाकी नहीं, आउटपुट सही ढंग से तीन अलग nth-child ब्लॉक उपयोग करता है। इसे किसी भी प्रोजेक्ट में डालें और लोगो बायें किनारे से चिपका रहता है, क्रिया दायें से चिपकती है, और शीर्षक बीच भरता है — कोई फ़्लोट नहीं, कोई मार्जिन नहीं।

अक्सर पूछे जाने वाले प्रश्न#

justify-content बनाम align-items — कौन-सा कौन?#

justify-content हमेशा मुख्य अक्ष के साथ काम करता है (वह दिशा जो flex-direction सेट करता है — row में क्षैतिज, column में लंबवत)। align-items हमेशा अनुप्रस्थ अक्ष (मुख्य अक्ष के लंबवत) के साथ काम करता है। इसलिए row में, justify-content बायाँ/दायाँ अंतराल नियंत्रित करता है और align-items ऊपर/नीचे अलाइनमेंट नियंत्रित करता है। दिशा column पर फ़्लिप करें और वे भूमिकाएँ अदला-बदली करते हैं। “justify = main, align = cross” याद रखना आपको सबसे सामान्य Flexbox भ्रम से बचाता है।

flex-grow वास्तव में कब कुछ करता है?#

केवल तब जब सोखने हेतु मुक्त स्थान हो। यदि तीनों बच्चों का flex-grow: 1 है और कंटेनर बच्चों की ज़रूरत से चौड़ा है, तो शेष स्थान तीस में बँटकर समान रूप से जोड़ा जाता है। यदि कंटेनर ठीक भरा है, कुछ नहीं बढ़ता। flex-grow: 0 (डिफ़ॉल्ट) सेट करें और कोई बच्चा विस्तार से इनकार करता है, अपने भाई-बहनों को स्थान लेने देता है। flex-shrink प्रतिबिंब है: यह तय करता है कि पर्याप्त जगह न होने पर कौन पहले स्थान छोड़ता है।

मेरा gap क्यों नहीं दिख रहा?#

तीन सामान्य कारण: बच्चों के पास निश्चित चौड़ाई है जो कंटेनर पूरी तरह भरती है (गैप हेतु कोई जगह नहीं), flex-wrap: nowrap बच्चों को ओवरफ़्लो करने पर मजबूर करता है बजाय गैप-जागरूक लेआउट में रैप होने, या बच्चों पर कोई मार्जिन दृश्य रूप से गैप छिपाता है। यहाँ स्लाइडर 64 तक जाता है; यदि आपको और चाहिए, तो अंतर्निहित गुण कोई भी लंबाई स्वीकार करता है, इसलिए CSS कॉपी करें और अपनी फ़ाइल में gap बढ़ाएँ।

आउटपुट nth-child उपयोग करता है — क्या मैं क्लास उपयोग कर सकता हूँ?#

बेशक। .item:nth-child(N) चयनकर्ता इसलिए उत्सर्जित होते हैं क्योंकि वे आइटम भिन्न होने पर पूर्वावलोकन से स्पष्ट रूप से मैप करते हैं। वास्तविक कोड में, उन्हें अपनी क्लासें (.logo, .title, .action) से बदलें — अंदर के घोषणाएँ समान रहती हैं। जब हर बच्चा मेल खाता है, टूल पहले से ही एक साझा .item ब्लॉक उत्सर्जित करता है जिसे आप एक जगह नाम बदल सकते हैं।