फ्लेक्सबॉक्स

docs.scrimba.com

आप तीन बटन एक पंक्ति में बैठे हुए चाहते हैं, समान रूप से दूरी पर, सभी समान ऊंचाई पर, और लंबवत केंद्रित, चाहे हर एक में कितना भी पाठ हो। पुराने दिनों में इसका मतलब फ्लोट्स, क्लीयरफिक्स, और बहुत सारे अनुमान थे। फ्लेक्सबॉक्स ठीक इसके लिए बनाया गया उपकरण है: आप एक कंटेनर को अपने बच्चों को एक लाइन में लेआउट करने के लिए कहते हैं, और फिर आप उन्हें दो अक्षों के साथ तब तक धकेलते हैं जब तक वे वहां न बैठ जाएं जहां आप चाहते हैं। वेब पर देखा जाने वाला अधिकांश दैनिक लेआउट, नेविगेशन बार, टूलबार, कार्ड की पंक्तियां, अंदर एक फ्लेक्स कंटेनर है।

फ्लेक्स कंटेनर

फ्लेक्सबॉक्स एक पैरेंट एलिमेंट पर एक लाइन से शुरू होता है। एक कंटेनर पर display: flex सेट करें और इसके सीधे बच्चे एक पंक्ति में एक दूसरे के बगल में खड़े हो जाते हैं। वह कंटेनर अब एक फ्लेक्स कंटेनर है, और इसके अंदर प्रत्येक बच्चा एक फ्लेक्स आइटम बन जाता है।

.nav {
  display: flex;    /* बच्चे अब एक पंक्ति में बैठते हैं */
}

आइटमें दो दिशाओं के साथ लेआउट करते हैं। मुख्य अक्ष बाएं से दाएं चलता है, जैसे आइटमें पंक्तिबद्ध होते हैं। क्रॉस अक्ष ऊपर से नीचे चलता है, पंक्ति के पार। आप दोनों अक्षों के साथ आइटमों को नियंत्रित करेंगे, इसलिए उन्हें अभी चित्रित करना मददगार है: मुख्य अक्ष वह लाइन है जिस पर आइटमें बैठते हैं, क्रॉस अक्ष इसके पार की दिशा है।

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

.nav {
  display: flex;    /* सीधे बच्चे फ्लेक्स आइटमों की एक पंक्ति बन जाते हैं */
}

पूरा मॉडल दो अक्षों पर चलता है। मुख्य अक्ष वह दिशा है जिसमें आइटमें बहते हैं, डिफ़ॉल्ट रूप से एक पंक्ति, तो बाएं से दाएं। क्रॉस अक्ष इसके लंबवत है, ऊपर से नीचे चल रहा है। हर संरेखण प्रॉपर्टी जो आप मिलते हैं वह एक अक्ष या दूसरे पर काम करती है, इसलिए दोनों को सीधा रखना वह बात है जो बाकी सब कुछ क्लिक करने देता है।

display: flex एक एलिमेंट को एक फ्लेक्स फॉर्मेटिंग कंटेक्स्ट देता है: इसके सीधे बच्चे फ्लेक्स आइटमें बन जाते हैं और सामान्य प्रवाह के बजाय फ्लेक्स एल्गोरिदम द्वारा लेआउट किए जाते हैं। केवल सीधे बच्चे भाग लेते हैं; पाठ रन और नेस्टेड वंशज उनके नीचे संभाले जाते हैं। यह उसी तरह की सीमा है जो मार्जिन कोलैप्सिंग को रोकती है, जो एक कारण है कि फ्लेक्स लेआउट फ्लोट-एंड-क्लीयर युग की तुलना में अधिक सुसंगतता से व्यवहार करते हैं जिसे वे प्रतिस्थापित करते हैं।

.nav {
  display: flex;    /* एक फ्लेक्स फॉर्मेटिंग कंटेक्स्ट स्थापित करता है */
}

दो अक्ष सब कुछ नियंत्रित करते हैं। मुख्य अक्ष flex-direction द्वारा सेट किया जाता है (डिफ़ॉल्ट रूप से एक पंक्ति, तो इनलाइन-स्टार्ट से इनलाइन-एंड), और क्रॉस अक्ष इसके लंबवत है। अंतर सौंदर्यात्मक नहीं है: justify-content हमेशा मुख्य अक्ष के साथ कार्य करता है और align-items हमेशा क्रॉस अक्ष के साथ कार्य करता है, तो जब आप flex-direction को column में फ्लिप करते हैं, तो वे दोनों प्रॉपर्टीज़ उस दिशा को स्वैप करती हैं जिसमें वे धकेलती हैं। लेआउट को "क्षैतिज" और "लंबवत" के बजाय अक्ष द्वारा नाम देना वह है जो इसे सुसंगत रखता है जब दिशा बदलती है।

.nav {
  display: flex;
}

एक एकल घोषणा, और किसी भी ब्लॉक के बच्चे ऊपर से नीचे तक स्टैक करना बंद कर देते हैं और एक पंक्ति में बैठना शुरू कर देते हैं। इस अध्याय की बाकी सब कुछ उन आइटमों को नियंत्रित करने के बारे में है जब वे कंटेनर में होते हैं।

Junoफ्लेक्स कंटेनर एक पैरेंट पर display: flex रखें और इसके सीधे बच्चे एक पंक्ति में खड़े हो जाते हैं। वह पैरेंट फ्लेक्स कंटेनर है, बच्चे फ्लेक्स आइटमें हैं। आइटमें दो दिशाओं में चलते हैं: मुख्य अक्ष वह लाइन है जिस पर वे बैठते हैं, क्रॉस अक्ष इसके पार चलता है, और आप दोनों के साथ आइटमों को धकेलेंगे।

Junoफ्लेक्स कंटेनरdisplay: flex एक कंटेनर को अपने सीधे बच्चों को फ्लेक्स आइटमों की एक पंक्ति के रूप में लेआउट करता है। केवल सीधे बच्चे भाग लेते हैं, न कि कोई भी अधिक नेस्टेड चीज़। अपने सिर में दोनों अक्षों को स्पष्ट रखें: मुख्य अक्ष प्रवाह दिशा है, क्रॉस अक्ष लंबवत है, और हर संरेखण प्रॉपर्टी एक या दूसरे पर काम करती है।

Junoफ्लेक्स कंटेनरdisplay: flex एक फ्लेक्स फॉर्मेटिंग कंटेक्स्ट शुरू करता है, तो सीधे बच्चे फ्लेक्स एल्गोरिदम द्वारा लेआउट करते हैं और मार्जिन इसके अंदर कोलैप्स करना बंद कर देते हैं। लेआउट को "क्षैतिज" और "लंबवत" के बजाय अक्ष द्वारा नाम दें, क्योंकि justify-content मुख्य अक्ष को ट्रैक करता है और align-items क्रॉस अक्ष को ट्रैक करता है। flex-direction को column में फ्लिप करें और वे दोनों उस तरीके को स्वैप करते हैं जिसमें वे धकेलते हैं।

अक्षों के साथ संरेखित करना

एक बार जब आपके आइटमें एक पंक्ति में होते हैं, तो दो प्रॉपर्टीज़ उन्हें चारों ओर ले जाती हैं। justify-content मुख्य अक्ष के साथ आइटमों को दूरी देता है, जिस दिशा में वे बैठते हैं। align-items उन्हें क्रॉस अक्ष के साथ, पंक्ति के अंदर ऊपर और नीचे ले जाता है।

.nav {
  display: flex;
  justify-content: space-between;   /* पंक्ति के साथ आइटमों को अलग-अलग धकेलें */
  align-items: center;              /* उन्हें लंबवत मध्य में पंक्तिबद्ध करें */
}

justify-content के लिए सामान्य मान flex-start (बाईं ओर बंडल), center (बीच में बंडल), flex-end (दाईं ओर बंडल), space-between (आइटमों के बीच अंतराल, अंत में कोई नहीं), और space-around (हर आइटम के दोनों ओर अंतराल) हैं। align-items के लिए, center वह है जिसे आप सबसे ज्यादा उपयोग करते हैं।

किसी चीज़ को दोनों तरीकों से केंद्र में रखने के लिए, जो कदम हर कोई पहले सीखता है: दोनों को center पर सेट करें।

.hero {
  display: flex;
  justify-content: center;   /* मुख्य अक्ष के साथ केंद्रित */
  align-items: center;       /* क्रॉस अक्ष के साथ केंद्रित */
}

दो प्रॉपर्टीज़ संरेखण को संभालती हैं, एक प्रति अक्ष। justify-content मुख्य अक्ष के साथ आइटमों को वितरित करता है, और align-items उन्हें क्रॉस अक्ष पर रखता है। क्योंकि वे विभिन्न अक्षों के मालिक हैं, वे कभी एक दूसरे से लड़ते नहीं हैं, वे लंबवत दिशाओं में इशारा करते हैं।

.nav {
  display: flex;
  justify-content: space-between;   /* मुख्य अक्ष के साथ आइटमों को फैलाएं */
  align-items: center;              /* उन्हें क्रॉस अक्ष पर केंद्रित करें */
}

justify-content के लिए, जानने लायक मान flex-start, center, flex-end, space-between (आइटमों के बीच समान अंतराल, किनारों को फ्लश), और space-around (हर आइटम के चारों ओर समान स्पेस, इसलिए अंत अंतराल आधे मध्य वाले हैं)। align-items के लिए, डिफ़ॉल्ट stretch है, जो हर आइटम को कंटेनर की ऊंचाई भरने देता है, और यही वह है जो कार्ड की एक पंक्ति को समान ऊंचाई देता है भले ही उनकी सामग्री भिन्न हो। align-items: center सेट करें और वे अपनी सामग्री ऊंचाई तक सिकुड़ जाते हैं और इसके बजाय बीच में बैठते हैं।

दोनों अक्षों पर केंद्र करना वह प्रॉपर्टी जोड़ी है जो फ्लेक्सबॉक्स को प्रसिद्ध बनाती है:

.hero {
  display: flex;
  justify-content: center;   /* मुख्य अक्ष */
  align-items: center;       /* क्रॉस अक्ष */
}

संरेखण अक्ष द्वारा स्पष्ट रूप से विभाजित होता है। justify-content मुख्य अक्ष के साथ मुक्त स्पेस वितरित करता है, और align-items हर आइटम की डिफ़ॉल्ट क्रॉस-अक्ष स्थिति सेट करता है। वे संघर्ष नहीं कर सकते क्योंकि वे लंबवत अक्षों पर काम करते हैं, लेकिन वे दोनों इस बात पर निर्भर करते हैं कि कौन सी दिशा "मुख्य" है, तो एक flex-direction: column स्वैप करता है कि प्रत्येक क्या नियंत्रित करता है।

.nav {
  display: flex;
  justify-content: space-between;   /* मुक्त स्पेस आइटमों के बीच जाता है */
  align-items: center;              /* हर आइटम क्रॉस अक्ष पर केंद्रित */
}

जो अंतर लोगों को भ्रमित करता है वह यह है कि justify-content केवल तभी कुछ करने के लिए होता है जब मुख्य अक्ष पर बचा हुआ स्पेस होता है। यह मुक्त स्पेस वितरित करता है, तो अगर आइटमें पहले से ही कंटेनर भरते हैं (या इसे ओवरफ़्लो करते हैं), तो space-between और center समान दिखते हैं क्योंकि वितरित करने के लिए कुछ नहीं है। align-items, इसके विपरीत, कंटेनर के क्रॉस साइज़ के अंदर हर आइटम को स्वतंत्र रूप से रखता है, और इसका प्रारंभिक मान stretch है: कोई निश्चित क्रॉस-अक्ष आकार वाले आइटमें कंटेनर को भरने के लिए बढ़ते हैं। समान-ऊंचाई कार्ड पंक्ति align-items: stretch अपना डिफ़ॉल्ट काम कर रही है। इसे align-self के साथ प्रति आइटम ओवरराइड करें, जो नीचे आकार अनुभाग में शामिल है।

.hero {
  display: flex;
  justify-content: center;   /* मुख्य-अक्ष केंद्र */
  align-items: center;       /* क्रॉस-अक्ष केंद्र, स्ट्रेच डिफ़ॉल्ट को ओवरराइड करता है */
}

दो आइटमें और कंटेनर पर एक min-height, दोनों center पर सेट, और आपने उस केंद्र समस्या को हल कर दिया है जिसे डेवलपर्स की एक पीढ़ी को निरपेक्ष स्थिति और नकारात्मक मार्जिन के साथ नकली करने में लगा।

Junoअक्षों के साथ संरेखित करनाjustify-content मुख्य अक्ष के साथ आइटमों को दूरी देता है, align-items उन्हें क्रॉस अक्ष के साथ ले जाता है। पहले को याद रखने के लिए मान हैं center, space-between, और flex-start। दोनों को center पर सेट करें और जो कुछ भी अंदर है वह बिल्कुल बीच में बैठता है, जो लेआउट कदम है जो आप बार-बार उपयोग करेंगे।

Junoअक्षों के साथ संरेखित करना एक प्रॉपर्टी प्रति अक्ष: मुख्य अक्ष पर justify-content, क्रॉस पर align-items। डिफ़ॉल्ट align-items: stretch यही है कि कार्ड की एक पंक्ति समान ऊंचाई में क्यों आती है बिना आपसे पूछे। और दोनों center पर सेट करना वह केंद्र-कुछ भी कदम है जो मेमोरी में प्रतिबद्ध करने लायक है।

Junoअक्षों के साथ संरेखित करनाjustify-content बचा हुआ मुख्य-अक्ष स्पेस वितरित करता है, तो अगर आइटमें पहले से ही पंक्ति भरते हैं तो यह कुछ नहीं करता, जो बहुत सारे "यह केंद्र क्यों नहीं है" क्षणों की व्याख्या करता है। align-items क्रॉस अक्ष पर हर आइटम को रखता है और stretch पर डिफ़ॉल्ट करता है, आपको मुक्त में समान-ऊंचाई पंक्तियां देता है। flex-direction फ्लिप करें और याद रखें दोनों प्रॉपर्टीज़ वह अक्ष स्वैप करती हैं जिस पर वे कार्य करती हैं।

दिशा और लपेटना

डिफ़ॉल्ट रूप से एक फ्लेक्स कंटेनर आइटमों को एक पंक्ति में लेआउट करता है। flex-direction के साथ वह बदलें। इसे column पर सेट करें और आइटमें एक दूसरे के बगल में बैठने के बजाय ऊपर से नीचे तक स्टैक करते हैं।

.sidebar {
  display: flex;
  flex-direction: column;   /* आइटमें अब लंबवत स्टैक करते हैं */
}

जब एक पंक्ति में आइटमें कमरे से बाहर चले जाते हैं, तो वे पतला और पतला हो जाते हैं। उन्हें इसके बजाय एक नई लाइन पर ड्रॉप करने देने के लिए, flex-wrap: wrap जोड़ें।

.card-row {
  display: flex;
  flex-wrap: wrap;   /* आइटमें जो फिट नहीं होते हैं अगली लाइन पर जाते हैं */
}

आइटमों के बीच की जगह के लिए, gap का उपयोग करें। यह बाहरी किनारों पर कोई स्पेस जोड़े बिना हर आइटम के बीच एक सुसंगत अंतराल जोड़ता है।

.card-row {
  display: flex;
  gap: 16px;   /* हर आइटम के बीच 16px */
}

flex-direction मुख्य अक्ष सेट करता है। डिफ़ॉल्ट row बाएं से दाएं चलता है; column मुख्य अक्ष को लंबवत बनाता है, तो आइटमें ऊपर से नीचे तक स्टैक करते हैं और, महत्वपूर्ण रूप से, justify-content अब लंबवत दूरी को नियंत्रित करता है जबकि align-items क्षैतिज नियंत्रित करता है। अगर आप क्रम फ्लिप करना चाहते हैं तो row-reverse और column-reverse भी हैं।

.sidebar {
  display: flex;
  flex-direction: column;   /* मुख्य अक्ष अब लंबवत है */
  justify-content: center;  /* जिसका अर्थ है यह लंबवत केंद्रित करता है */
}

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

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;   /* gap दोनों अक्षों पर काम करता है: पंक्तियों और स्तंभों के बीच 16px */
}

आइटमों पर मार्जिन के बजाय दूरी के लिए gap का उपयोग करें। gap केवल आइटमों के बीच लागू होता है, कभी बाहरी किनारों पर नहीं, इसलिए आपको कभी भी आखिरी बच्चे से ट्रेलिंग मार्जिन को हटाना नहीं पड़ता।

flex-direction मुख्य अक्ष को परिभाषित करता है, और हर अक्ष-निर्भर प्रॉपर्टी इसका अनुसरण करती है। row (डिफ़ॉल्ट) मुख्य अक्ष को क्षैतिज बनाता है; column इसे लंबवत बनाता है और चुप्पी से justify-content को लंबवत दूरी और align-items को क्षैतिज संरेखण को पुनः असाइन करता है। -reverse वेरिएंट मुख्य अक्ष की दिशा को फ्लिप करते हैं, लेकिन ध्यान दें कि वे केवल दृश्यमान रूप से पुनःक्रम करते हैं: DOM क्रम अपरिवर्तित रहता है, इसलिए कीबोर्ड और स्क्रीन-रीडर क्रम अभी भी स्रोत का अनुसरण करते हैं, जो एक वास्तविक पहुंच विचार है जब आप row-reverse के लिए पहुंचते हैं।

.sidebar {
  display: flex;
  flex-direction: column;    /* मुख्य अक्ष लंबवत; justify-content अब लंबवत केंद्रित करता है */
  gap: 8px;
}

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

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;   /* row-gap 16px, column-gap 24px */
}

यह भी वह जगह है जहां CSS ग्रिड के साथ सीमा दिखाई देती है। फ्लेक्स लपेट एक पंक्ति भरता है, फिर टूटता है, तो विभिन्न पंक्तियों पर आइटमें स्तंभों में संरेखित नहीं होते हैं। जब आपको एक सच्चा दो-आयामी ग्रिड संरेखित पंक्तियों और स्तंभों के साथ की आवश्यकता होती है, तो वह ग्रिड का काम है, फ्लेक्सबॉक्स का नहीं।

Junoदिशा और लपेटनाflex-direction: column आइटमों को एक पंक्ति के बजाय लंबवत स्टैक करता है। flex-wrap: wrap आइटमों को एक नई लाइन पर ड्रॉप करने देता है जब वे कमरे से बाहर चले जाते हैं, सिकुड़ने के बजाय। और gap आइटमों के बीच समान स्पेस रखता है बिना किनारों पर कोई जोड़े, तो मार्जिन से पहले इसके लिए पहुंचें।

Junoदिशा और लपेटनाflex-direction मुख्य अक्ष सेट करता है, और column पर स्विच करने का अर्थ है justify-content अब लंबवत दूरी देता है, जो लोगों को एक बार चकित करता है। flex-wrap: wrap वह है जो मीडिया प्रश्नों के बिना कार्ड पंक्ति को रीफ़्लो करता है। दूरी के लिए gap का उपयोग करें तो आप कभी भी आखिरी आइटम पर भटकते मार्जिन का पीछा नहीं करते हैं।

Junoदिशा और लपेटनाflex-direction मुख्य अक्ष को परिभाषित करता है और हर अक्ष-आधारित प्रॉपर्टी इसका अनुसरण करती है, जबकि -reverse मान दृश्यमान रूप से पुनःक्रम करते हैं लेकिन DOM और फोकस क्रम को अकेला छोड़ते हैं, तो इन्हें सावधानी से उपयोग करें। flex-wrap एक कंटेनर को बहु-पंक्ति बनाता है और लाइन दूरी को align-content को सौंपता है। जब लपेटे हुए आइटमों को सच्चे स्तंभों में संरेखित करने की आवश्यकता होती है, तो वह ग्रिड है, फ्लेक्सबॉक्स नहीं।

लचीली आइटम आकार देना

फ्लेक्सबॉक्स का बिंदु यह है कि आइटमें लचीले हो सकते हैं, बढ़ सकते हैं या सिकुड़ सकते हैं स्पेस साझा करने के लिए। शॉर्टहैंड जो आप सबसे ज्यादा उपयोग करेंगे वह है एक आइटम पर flex: 1, जो इसे बताता है कि बढ़ें और उपलब्ध कमरे के जो भी हिस्से का एक समान हिस्सा ले लें।

.card {
  flex: 1;   /* हर कार्ड पंक्ति के बराबर हिस्से को भरने के लिए बढ़ता है */
}

एक पंक्ति में तीन कार्ड पर flex: 1 रखें और वे कंटेनर को तीन समान चौड़ाई में विभाजित करते हैं। एक कार्ड को flex: 2 दें और यह दूसरों के रूप में दो बार अधिक स्पेस लेता है। वह एकल संख्या यह है कि आइटमें बीच बचा हुआ कमरा कैसे विभाजित करते हैं।

flex: 1 के पीछे तीन अलग नियंत्रण हैं: कितना आइटम बढ़ता है, कितना सिकुड़ता है, और इसका शुरुआती आकार। आप शायद शुरुआत में एक-एक करके उन्हें सेट नहीं करते हैं, शॉर्टहैंड सामान्य मामलों को कवर करता है, लेकिन यह जानने में मदद करता है कि वे वहां हैं।

तीन प्रॉपर्टीज़ निर्णय लेती हैं कि आइटमें कैसे स्पेस साझा करते हैं। flex-grow सेट करता है कि कितना आइटम बचा हुआ स्पेस भरने के लिए बढ़ता है (0 का मतलब बढ़मत न करें)। flex-shrink सेट करता है कि जब स्पेस तंग होता है तो यह कितना देता है (1, डिफ़ॉल्ट, का मतलब यह सिकुड़ सकता है)। flex-basis बढ़ने या सिकुड़ने से पहले आइटम का शुरुआती आकार सेट करता है, और यह डिफ़ॉल्ट auto, जिसका अर्थ है "सामग्री या चौड़ाई का उपयोग करें"।

flex शॉर्टहैंड तीनों को बंडल करता है, और आप जो मान वास्तव में टाइप करते हैं वह कुछ हैं:

.card {
  flex: 1;   /* grow 1, shrink 1, basis 0: equal-width columns */
}

.sidebar {
  flex: 0 0 240px;   /* do not grow, do not shrink, stay 240px */
}

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

आइटम आकार देना तीन प्रॉपर्टीज़ के माध्यम से हल करता है जिन्हें कंटेनर क्रम में मूल्यांकन करता है। flex-basis आइटम का शुरुआती मुख्य-अक्ष आकार है, कोई भी मुक्त स्पेस वितरित होने से पहले लिया जाता है; इसके डिफ़ॉल्ट auto आइटम के width (या सामग्री आकार) के लिए स्थगित करते हैं। फिर कंटेनर आधार मानों के योग और इसके स्वयं के आकार के बीच अंतर को मापता है। अगर मुक्त स्पेस है, तो यह हर आइटम के flex-grow के अनुपात में दिया जाता है। अगर कमी है, तो इसे हर आइटम के flex-shrink के अनुपात में वापस लिया जाता है इसके आधार द्वारा भारित।

/* flex: 1 expands to flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
.card {
  flex: 1;   /* basis 0, so items ignore content width and split space by grow factor */
}

सूक्ष्म भाग flex-basis बनाम width है, क्योंकि वे बातचीत करते हैं। flex-basis: 0 (flex: 1 के जैसे) आइटमों को अपनी सामग्री को अनदेखा करता है और आइटमों को अकेले बढ़ फैक्टर द्वारा स्पेस विभाजित करते हैं, सच्चे समान स्तंभ देते हैं। flex-basis: auto (जैसे flex: auto, या एक सादा width) हर आइटम को इसकी सामग्री या घोषित चौड़ाई में शुरू करता है और केवल फिर शेष साझा करता है, तो अधिक सामग्री वाले आइटमें अधिक व्यापक हो जाते हैं। उनके बीच चुनना सच में चुनना है कि क्या सामग्री को अंतिम चौड़ाई को प्रभावित करना चाहिए।

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

.main {
  flex: 1;
  min-width: 0;   /* lets this item shrink below its content, so long text truncates instead of overflowing */
}

align-self एकल आइटम के लिए align-items को ओवरराइड करता है, तो एक आइटम flex-start पर बैठ सकता है जबकि बाकी केंद्र करते हैं। और टूलिंग कॉल: एक-आयामी लेआउट के लिए फ्लेक्सबॉक्स तक पहुंचें, एक नेविगेशन बार, एक टूलबार, आइटमों की एकल पंक्ति या स्तंभ। जब आपको एक ही समय में संरेखित पंक्तियों और स्तंभों की आवश्यकता होती है, CSS ग्रिड सही उपकरण है। अगर आप अनिश्चित हैं कि चौड़ाई इस सब के नीचे कैसे हल करती हैं, आकार देने वाली इकाइयां शामिल करती हैं कि प्रतिशत और अन्य इकाइयां यहां कैसे व्यवहार करती हैं।

.layout {
  display: flex;
  gap: 24px;
}
.sidebar {
  flex: 0 0 240px;   /* निश्चित 240px, कभी बढ़मत या सिकुड़मत नहीं */
}
.main {
  flex: 1;           /* सभी शेष स्पेस लेता है */
}

एक निश्चित साइडबार एक लचीले मुख्य स्तंभ के बगल में, इरादे की तीन पंक्तियां। यह एक पैटर्न, साथ ही पहले से संरेखित नेविगेशन बार, आपके द्वारा बनाए जाने वाले लेआउट के एक बड़े स्लाइस को कवर करता है।

Junoलचीली आइटम आकार देना एक आइटम पर flex: 1 बताता है कि बढ़ें और पंक्ति का एक समान हिस्सा लें, तो flex: 1 के साथ तीन कार्ड समान चौड़ाई आते हैं। एक को flex: 2 पर बढ़ाएं और यह दो बार स्पेस लेता है। वह एकल संख्या यह है कि फ्लेक्स आइटमें कमरा कैसे विभाजित करते हैं।

Junoलचीली आइटम आकार देनाflex शॉर्टहैंड बढ़, सिकुड़, और आधार को बंडल करता है। flex: 1 समान-चौड़ाई स्तंभ देता है क्योंकि इसका 0 आधार आइटमों को कुछ नहीं से शुरू करता है और समान रूप से बढ़ता है। flex: 0 0 240px एक flex: 1 मुख्य क्षेत्र के आगे आपका निश्चित साइडबार है, एक लेआउट जिसे आप बार-बार पहुंचेंगे।

Junoलचीली आइटम आकार देनाflex-basis शुरुआती आकार है स्पेस साझा होने से पहले, और यह फ्लेक्स आइटम पर width को हराता है, तो flex: 1 (आधार 0) स्पेस को समान रूप से विभाजित करता है जबकि flex: auto सामग्री को चौड़ाई को प्रभावित करने देता है। डिफ़ॉल्ट min-width: auto को देखें, जो आइटम को अपनी सामग्री से नीचे सिकुड़ने से रोकता है और जब तक आप min-width: 0 सेट नहीं करते तब तक पंक्ति को ओवरफ़्लो करता है। संरेखण से एक आइटम को छीलने के लिए align-self का उपयोग करें, और ग्रिड में स्विच करें जब आपको संरेखित पंक्तियों और स्तंभों की आवश्यकता हो।