CSS Academy · पाठ

Flex Shorthand Pattern

Flex shorthand में दक्ष बनिए और flex: 1, flex: none तथा flex: auto जैसे सामान्य मान समझिए।

पाठ 3, कुल 4 में से13 चरण

Flex Shorthand Pattern, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

flex शॉर्टहैंड पर पुनः दृष्टि

flex शॉर्टहैंड एक ही घोषणा में flex-grow, flex-shrink और flex-basis सेट करता है। वास्तविक दुनिया के लेआउट के लिए शॉर्टहैंड के विभिन्न रूपों को समझना आवश्यक है।

flex: 1

flex: 1, flex: 1 1 0% के बराबर है। आइटम शून्य आधार से शुरू होते हैं और उपलब्ध स्थान भरने के लिए समान रूप से बढ़ते हैं। समान कॉलम बनाने के लिए यह सबसे सामान्य शॉर्टहैंड है।

<div class="equal-cols">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: auto

flex: auto = flex: 1 1 auto। आइटम अपने स्वाभाविक सामग्री आकार से शुरू होते हैं और फिर अनुपात के अनुसार बढ़ते या सिकुड़ते हैं। बढ़ते समय अधिक चौड़ी सामग्री को अधिक स्थान मिलता है।

<div class="nav-links">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

flex: none

flex: none = flex: 0 0 auto। आइटम कठोर होता है — वह न तो बढ़ता है, न सिकुड़ता है। उसका आकार स्वाभाविक सामग्री की चौड़ाई या स्पष्ट रूप से दी गई चौड़ाई/ऊँचाई से निर्धारित होता है।

<div class="row">
  <div class="logo">Logo</div>
  <div>Flexible content</div>
</div>

flex: 0 0 Xpx

स्थिर आकार वाला, गैर-लचीला आइटम। सटीक चौड़ाई वाले साइडबार पैनल बनाने का यह सबसे स्पष्ट तरीका है:

<div class="layout">
  <div class="sidebar-left">Left</div>
  <div class="main-content">Main</div>
  <div class="sidebar-right">Right</div>
</div>

flex: 1 बनाम flex: 1 1 auto

मुख्य अंतर यह है: flex: 1 (आधार 0%) के साथ सभी आइटम 0 से शुरू होकर अनुपात में बढ़ते हैं। flex: 1 1 auto के साथ आइटम अपने स्वाभाविक सामग्री आकार से शुरू होकर बढ़ते हैं। इससे शेष स्थान के वितरण पर प्रभाव पड़ता है।

flex: 2 अनुपात

अनुपात के अनुसार वितरण के लिए असमान flex-grow मानों का उपयोग कीजिए:

<div class="split">
  <div class="main">Main (2/3)</div>
  <div class="side">Side (1/3)</div>
</div>

स्थिर और लचीले आइटम का संयोजन

वास्तविक दुनिया में सबसे सामान्य पैटर्न: स्थिर साइडबार + लचीली मुख्य सामग्री:

<div class="layout">
  <div class="sidebar">Sidebar 280px</div>
  <div class="content">Flexible content</div>
</div>

min-width: 0 फ्लेक्स युक्ति

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

<div class="row">
  <div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>

कार्ड ग्रिड पैटर्न

लचीले लेकिन सीमित आकार वाले कार्डों का उत्तरदायी कार्ड ग्रिड:

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

flex शॉर्टहैंड की डीबगिंग

परिकलित flex-grow, flex-shrink और flex-basis मानों की जाँच करने के लिए ब्राउज़र DevTools का उपयोग कीजिए। Flexbox निरीक्षक ओवरले खाली स्थान और आइटम के आकारों को दृश्य रूप से भी दिखाता है।

त्वरित जाँच

flex: auto किस रूप में विस्तृत होता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

मुख्य flex शॉर्टहैंड याद रखिए: flex: 1 (शून्य से समान कॉलम), flex: auto (स्वाभाविक आकार से बढ़ना), flex: none (कठोर), flex: 0 0 Xpx (स्थिर आकार)। जिन फ्लेक्स चाइल्ड में काटकर छोटा किया जाने वाला पाठ हो, उन पर min-width: 0 का उपयोग कीजिए। पारंपरिक साइडबार लेआउट के लिए स्थिर और लचीले आइटम को मिलाकर उपयोग कीजिए।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

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

क्या “Flex Shorthand Pattern” पाठ निःशुल्क है?

हाँ—“Flex Shorthand Pattern” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Flex Shorthand Pattern” में मैं क्या सीखूँगा?

Flex shorthand में दक्ष बनिए और flex: 1, flex: none तथा flex: auto जैसे सामान्य मान समझिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Flex Shorthand Pattern” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ