Flex और दिशा सक्षम करना
flex से flexbox सक्रिय करें, flex-row और flex-col से पंक्ति या स्तंभ लेआउट चुनें और flex कंटेनर मॉडल समझें।
Flex और दिशा सक्षम करना, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
फ्लेक्सबॉक्स क्या है
फ्लेक्सबॉक्स एक CSS लेआउट मॉडल है, जिसे आइटमों को एक ही आयाम — यानी पंक्ति या कॉलम — में व्यवस्थित करने के लिए बनाया गया है। यह आइटमों के बीच स्थान बाँटने, उन्हें अक्षों के अनुसार संरेखित करने और आइटमों के लचीले आकार सँभालने में उत्कृष्ट है। फ्लेक्सबॉक्स से पहले क्षैतिज केंद्रीकरण और समान ऊँचाई वाले कॉलम के लिए CSS युक्तियों की आवश्यकता होती थी; फ्लेक्सबॉक्स इन कार्यों को बहुत सरल बना देता है। Tailwind पूरी फ्लेक्सबॉक्स API को उपयोगिता क्लासों के माध्यम से उपलब्ध कराता है।
flex क्लास से फ्लेक्स सक्षम करना
किसी भी एलिमेंट पर flex लागू करके उसे फ्लेक्स कंटेनर बनाएँ। उसके सीधे बच्चे फ्लेक्स आइटम बन जाते हैं और फ्लेक्स लेआउट में भाग लेते हैं। डिफ़ॉल्ट रूप से, फ्लेक्स आइटम एक पंक्ति में (बाएँ से दाएँ) व्यवस्थित होते हैं और कंटेनर की पूरी ऊँचाई भरने के लिए फैलते हैं। बच्चे किस प्रकार व्यवस्थित होंगे, यह सब पैरेंट कंटेनर पर लागू की गई उपयोगिताओं से नियंत्रित होता है।
<!-- Without flex: items stack vertically as blocks -->
<div>
<div class="bg-blue-200 p-4">Item 1</div>
<div class="bg-blue-300 p-4">Item 2</div>
</div>
<!-- With flex: items align in a row -->
<div class="flex">
<div class="bg-blue-200 p-4">Item 1</div>
<div class="bg-blue-300 p-4">Item 2</div>
</div>इनलाइन कंटेनरों के लिए inline-flex
inline-flex ऐसा फ्लेक्स कंटेनर बनाता है जो इनलाइन एलिमेंट की तरह व्यवहार करता है — यह पूरी पंक्ति की चौड़ाई नहीं घेरता। यह आइकन के साथ लेबल वाले घटकों, बटन समूहों और ऐसे टैगों के लिए उपयोगी है जिन्हें अपनी आंतरिक सामग्री को फ्लेक्सबॉक्स से संरेखित करना हो, जबकि वे आसपास के पाठ या अन्य इनलाइन एलिमेंटों के साथ इनलाइन प्रवाह में बने रहें।
<!-- inline-flex: the button is inline but content aligns with flex -->
<p class="text-gray-700">
Click the
<button class="inline-flex items-center gap-1 bg-indigo-100 text-indigo-700 px-2 py-1 rounded font-medium text-sm">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"/></svg>
Add Item
</button>
button to continue.
</p>फ्लेक्स पंक्ति की दिशा
flex-row डिफ़ॉल्ट दिशा है — आइटम बाएँ से दाएँ प्रवाहित होते हैं (LTR लेआउट में)। इसे स्पष्ट रूप से लिखने की आवश्यकता बहुत कम होती है, लेकिन छोटे ब्रेकपॉइंट पर लागू किए गए flex-col को रीसेट करने में यह उपयोगी है। पंक्ति दिशा में मुख्य अक्ष क्षैतिज (बाएँ से दाएँ) और क्रॉस अक्ष ऊर्ध्वाधर (ऊपर से नीचे) होता है।
<!-- Explicit row direction (same as default) -->
<div class="flex flex-col md:flex-row gap-4">
<div class="bg-indigo-100 p-4 rounded flex-1">Stacks vertically on mobile</div>
<div class="bg-indigo-200 p-4 rounded flex-1">Aligns horizontally on desktop</div>
</div>फ्लेक्स कॉलम की दिशा
flex-col मुख्य अक्ष को ऊर्ध्वाधर बना देता है — आइटम सामान्य ब्लॉक एलिमेंटों की तरह ऊपर से नीचे एक-दूसरे के नीचे आते हैं, लेकिन अब वे फ्लेक्सबॉक्स के संरेखण और आकार-वितरण में भाग लेते हैं। यह साइडबार, कार्ड लेआउट और ऐसे सभी डिज़ाइन का आधार है जहाँ ऊर्ध्वाधर क्रम को items-center या justify-between जैसी फ्लेक्सबॉक्स संरेखण उपयोगिताओं की शक्ति चाहिए।
<!-- Vertical sidebar layout -->
<aside class="flex flex-col h-screen bg-gray-900 text-white w-64">
<div class="p-6 border-b border-gray-700">
<span class="text-xl font-bold">Logo</span>
</div>
<nav class="flex-1 p-4 space-y-1">
<a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-800">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-800">Settings</a>
</nav>
<div class="p-4 border-t border-gray-700">
<span class="text-sm text-gray-400">User Profile</span>
</div>
</aside>उलटी दिशाएँ
flex-row-reverse और flex-col-reverse HTML स्रोत क्रम बदले बिना फ्लेक्स आइटमों का दृश्य क्रम उलट देते हैं। यह RTL समर्थन और उन कुछ लेआउट पैटर्न के लिए उपयोगी है जहाँ दृश्य क्रम और DOM क्रम अलग होने चाहिए। ध्यान दें कि केवल दृश्य क्रम बदलता है — कीबोर्ड नेविगेशन और स्क्रीन रीडर का क्रम अब भी DOM क्रम का पालन करता है।
<!-- Reverse row: icons appear on the right of their labels -->
<div class="flex flex-row-reverse items-center gap-2">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12l-6-6h12l-6 6z"/>
</svg>
<span class="text-gray-700">Sort by Date</span>
</div>फ्लेक्स कंटेनर मॉडल
फ्लेक्स कंटेनर मॉडल को समझना Tailwind लेआउट में निपुण होने की कुंजी है। मुख्य अक्ष प्राथमिक दिशा है (पंक्ति = क्षैतिज, कॉलम = ऊर्ध्वाधर)। क्रॉस अक्ष इसके लंबवत होता है। justify-* मुख्य अक्ष के साथ संरेखण नियंत्रित करता है; items-* क्रॉस अक्ष के साथ संरेखण नियंत्रित करता है। आगे सीखने वाली सभी फ्लेक्स उपयोगिताएँ इसी दो-अक्षीय मॉडल के भीतर काम करती हैं।
/* Flex row:
Main axis: horizontal (left → right)
Cross axis: vertical (top → bottom)
justify-*: controls left/right positioning
items-*: controls top/bottom positioning
Flex column:
Main axis: vertical (top → bottom)
Cross axis: horizontal (left → right)
justify-*: controls top/bottom positioning
items-*: controls left/right positioning
*/फ्लेक्स पंक्ति में व्यावहारिक नेवबार
नेवबार फ्लेक्स पंक्ति लेआउट का सबसे सामान्य उदाहरण है। flex items-center वाला कंटेनर क्रॉस अक्ष पर सभी चीज़ों को लंबवत केंद्रित करता है। justify-between लोगो को बाईं ओर और नेव लिंक को दाईं ओर धकेलता है। इनमें से हर लेआउट गुण पैरेंट कंटेनर पर लागू होता है और सभी बच्चों को एक साथ नियंत्रित करता है।
<header class="flex items-center justify-between px-8 py-4 bg-white shadow">
<span class="text-xl font-bold text-indigo-600">Brand</span>
<nav class="flex items-center gap-6">
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Products</a>
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Pricing</a>
<a href="#" class="text-sm bg-indigo-600 text-white px-4 py-2 rounded-lg">Get Started</a>
</nav>
</header>फ्लेक्स से केंद्रीकरण
क्षैतिज और ऊर्ध्वाधर, दोनों दिशाओं में पूर्ण केंद्रीकरण फ्लेक्सबॉक्स से बेहद सरल है: कंटेनर पर flex items-center justify-center लागू करें। यह कंटेनर और सामग्री के आकार की परवाह किए बिना काम करता है, और पहले से किसी आयाम को जानने की आवश्यकता नहीं होती। इस पैटर्न का उपयोग लोडिंग स्पिनर, खाली स्थिति के चित्रण, मोडल संवाद और पूरे पृष्ठ के लैंडिंग अनुभागों में किया जाता है।
<!-- Perfect centering: horizontal and vertical -->
<div class="min-h-screen flex items-center justify-center bg-gray-50">
<div class="bg-white rounded-2xl shadow-lg p-12 text-center">
<h1 class="text-3xl font-bold text-gray-900">Perfectly Centered</h1>
<p class="text-gray-500 mt-2">No margin math required.</p>
</div>
</div>उत्तरदायी दिशा के साथ फ्लेक्स
मोबाइल पर एलिमेंटों को ऊर्ध्वाधर रूप से रखना और डेस्कटॉप पर उन्हें अगल-बगल रखना बहुत सामान्य पैटर्न है। flex flex-col md:flex-row का उपयोग करें: मोबाइल पर आइटम एक-दूसरे के नीचे होंगे और md ब्रेकपॉइंट पर क्षैतिज पंक्ति में बदल जाएँगे। यह एकल क्लास परिवर्तन किसी भी मीडिया क्वेरी CSS के बिना पूरे उत्तरदायी लेआउट व्यवहार को सँभालता है।
<!-- Feature section: stack on mobile, row on desktop -->
<section class="flex flex-col md:flex-row gap-8 px-6 py-16">
<div class="flex-1 bg-indigo-50 rounded-xl p-8">
<h3 class="font-bold text-xl mb-2">Feature One</h3>
<p class="text-gray-600">Description of feature one.</p>
</div>
<div class="flex-1 bg-pink-50 rounded-xl p-8">
<h3 class="font-bold text-xl mb-2">Feature Two</h3>
<p class="text-gray-600">Description of feature two.</p>
</div>
</section>नेस्टेड फ्लेक्स कंटेनर
फ्लेक्स कंटेनरों को एक-दूसरे के भीतर रखा जा सकता है। बाहरी flex flex-col पृष्ठ लेआउट (हेडर, मुख्य भाग, फ़ूटर) सँभाल सकता है, जबकि अंदर के flex कंटेनर घटक लेआउट (नेवबार आइटम, कार्ड सामग्री) सँभालते हैं। हर फ्लेक्स संदर्भ स्वतंत्र होता है — अंदर के फ्लेक्स कंटेनर की उपयोगिताएँ बाहरी कंटेनर को प्रभावित नहीं करतीं। जटिल वास्तविक-विश्व UI लेआउट के लिए फ्लेक्सबॉक्स को नेस्ट करना सामान्य पैटर्न है।
<div class="flex flex-col min-h-screen">
<header class="flex items-center justify-between px-8 py-4 bg-white border-b">
<span class="font-bold">Logo</span>
<nav class="flex gap-4">
<a href="#" class="text-sm">Home</a>
</nav>
</header>
<main class="flex-1 flex items-center justify-center">
<p class="text-gray-600">Main content</p>
</main>
<footer class="bg-gray-800 text-white text-center py-6">
Footer
</footer>
</div>त्वरित जाँच
इस पाठ से Tailwind CSS महारत की अवधारणाओं के बारे में अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: flex एक फ्लेक्स कंटेनर बनाता है, जिसमें बच्चे फ्लेक्स आइटम बन जाते हैं, flex-row और flex-col मुख्य अक्ष की दिशा निर्धारित करते हैं, और flex items-center justify-center आयाम जाने बिना पूर्ण केंद्रीकरण प्राप्त करता है। आगे हम justify और items उपयोगिताओं से बच्चों को मुख्य और क्रॉस अक्षों पर स्थित करेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “Flex और दिशा सक्षम करना” पाठ निःशुल्क है?
हाँ—“Flex और दिशा सक्षम करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Flex और दिशा सक्षम करना” में मैं क्या सीखूँगा?
flex से flexbox सक्रिय करें, flex-row और flex-col से पंक्ति या स्तंभ लेआउट चुनें और flex कंटेनर मॉडल समझें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“Flex और दिशा सक्षम करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Flex और दिशा सक्षम करना
- सामग्री को उचित ठहराना और आइटम संरेखित करना
- Flex का विस्तार, सिकुड़ना और आधार
- रैपिंग और अंतराल