CSS टॉपिक्स

🎨 CSS Design✨पाठ 11 / 16

Flexbox Layout

Main Axis vs Cross Axis, justify-content, align-items, flex-wrap और flex: 1 1 auto का गणित सरल हिंदी में।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.1D लेआउट की क्रांति: फ्लेक्सबॉक्स ने फ्लोट्स (floats) और टेबल हैक्स को हमेशा के लिए कैसे खत्म किया।

2.दो अक्ष (The Dual Axes): मुख्य अक्ष (Main Axis) बनाम लंबवत अक्ष (Cross Axis) का मेंटल मॉडल।

3.कंटेनर अलाइनमेंट: `justify-content`, `align-items`, `align-content` और मॉडर्न `gap`।

4.फ्लेक्स का गणित: `flex-grow`, `flex-shrink` और `flex-basis` का सटीक पिक्सल हिसाब।

5.ऑटो-मार्जिन का जादू: `margin-left: auto` से नैवबार बटनों को आसानी से दाएँ धकेलना।

6.सीनियर डेवलपर सीक्रेट्स: `min-width: auto` बग को हराना और समान ऊंचाई वाले कार्ड्स बनाना।

🧭 मेंटल मॉडल: मुख्य अक्ष (Main Axis) बनाम लंबवत अक्ष (Cross Axis)

फ्लेक्सबॉक्स एक एक-आयामी (1D) लेआउट सिस्टम है। यह तत्वों को एक काल्पनिक पटरी (Main Axis) पर सजाता है, और उसके लंबवत (Cross Axis) पर उनका संतुलन बनाता है:

जब flex-direction: row हो (डिफ़ॉल्ट)क्षैतिज पंक्ति (Horizontal Row)

→ मुख्य अक्ष (Main Axis): बाएँ से दाएँ (नियंत्रण: justify-content)

↓ लंबवत अक्ष (Cross Axis): ऊपर से नीचे (नियंत्रण: align-items)

जब flex-direction: column होलंबवत स्तंभ (Vertical Stack)

↓ मुख्य अक्ष (Main Axis): ऊपर से नीचे (नियंत्रण: justify-content)

→ लंबवत अक्ष (Cross Axis): बाएँ से दाएँ (नियंत्रण: align-items)

justify-content (मुख्य अक्ष)

flex-start: शुरुआत में जमा होना (डिफ़ॉल्ट)
center: बिल्कुल केंद्र में आ जाना
flex-end: अंत में जाकर बैठना
space-between: पहला शुरुआत में, अंतिम अंत में, बीच में बराबर दूरी
space-evenly: सभी तत्वों और बाहरी किनारों के बीच बिल्कुल एक समान दूरी

align-items (लंबवत अक्ष)

stretch: पूरी ऊंचाई तक खिंच जाना (डिफ़ॉल्ट)
center: लंबवत रूप से बीच में आना
flex-start: ऊपर की तरफ चिपकना
flex-end: नीचे की तरफ चिपकना
baseline: अलग-अलग फॉन्ट्स की टेक्स्ट लाइन को एक सीध में लाना

💻 लाइव फ्लेक्सबॉक्स मास्टरक्लास प्लेग्राउंड

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Flexbox Masterclass Demo</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      padding: 24px;
      color: #0f172a;
    }

/* 1. Flexbox Navigation Bar */
    .navbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      padding: 16px 24px;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      margin-bottom: 24px;
    }

.brand {
      font-weight: 800;
      font-size: 18px;
      color: #4f46e5;
    }

.nav-links {
      display: flex;
      gap: 18px;
      list-style: none;
    }

.nav-links a {
      text-decoration: none;
      color: #475569;
      font-weight: 600;
      font-size: 14px;
    }

.cta-button {
      background: #4f46e5;
      color: #ffffff;
      border: none;
      padding: 8px 18px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
    }

/* 2. Responsive Card Grid using Flexbox */
    .card-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px;
    }

.card {
      /* flex: grow, shrink, basis */
      flex: 1 1 200px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

.card h4 {
      font-size: 16px;
      margin-bottom: 8px;
      color: #1e293b;
    }

.card p {
      font-size: 13px;
      color: #64748b;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  
  <nav class="navbar">
    <div class="brand">CodeX Cider</div>
    <ul class="nav-links">
      <li><a href="#">Tracks</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Compiler</a></li>
    </ul>
    <button class="cta-button">Join Free</button>
  </nav>

<div class="card-row">
    <div class="card">
      <h4>⚡ HTML5</h4>
      <p>Semantic tags, media players, and forms.</p>
    </div>
    <div class="card">
      <h4>🎨 Modern CSS</h4>
      <p>Flexbox, Grid, animations, and responsive UI.</p>
    </div>
    <div class="card">
      <h4>🚀 JavaScript</h4>
      <p>DOM manipulation, async/await, and APIs.</p>
    </div>
  </div>
</body>
</html>

Click & type to editHTML5

Browser Preview

🧮 `flex: grow shrink basis` का गणितीय सच

`flex` शॉर्टहैंड तीन गणितीय लीवर का संगम है: flex: [grow] [shrink] [basis];। ब्राउज़र इसका गणित कैसे लगाता है, इसे समझना अनिवार्य है:

flex-basisशुरुआती आकार

अतिरिक्त खाली जगह बांटने से पहले तत्व का बुनियादी आकार। यह `200px`, `25%` या `auto` हो सकता है।

flex-growबची जगह का हिस्सा

कंटेनर में मौजूद अतिरिक्त खाली जगह में से यह तत्व कितना हिस्सा लेगा। यदि A का `grow: 1` और B का `grow: 2` हो, तो B को दोगुना अतिरिक्त फैलाव मिलेगा!

flex-shrinkसिकुड़ने का त्याग

जब कंटेनर छोटा पड़ जाए, तो यह तत्व कितना सिकुड़ेगा। `0` मान लगाने पर तत्व कभी भी अपने आधार आकार (basis) से छोटा नहीं होगा।

शॉर्टहैंड	विस्तार	व्यवहार	सर्वोत्तम उपयोग
flex: 1;	1 1 0%	कंटेंट साइज को भूलकर बिल्कुल एक बराबर चौड़ाई बनाता है	3 बराबर चौड़ाई वाले कार्ड्स
flex: auto;	1 1 auto	कंटेंट की लंबाई के अनुपात में फैलता है (ज्यादा टेक्स्ट = चौड़ा कॉलम)	नैविगेशन टैब्स
flex: initial;	0 1 auto	बढ़ता नहीं है, पर भीड़ होने पर सिकुड़ जाता है (CSS डिफ़ॉल्ट)	आइकन्स, अवतार तस्वीरें
flex: none;	0 0 auto	पूरी तरह अडिग — न कभी बढ़ेगा, न कभी सिकुड़ेगा	फिक्स साइडबार (240px)

🚀 फ्लेक्सबॉक्स का ऑटो-मार्जिन सुपरपावर

सामान्य ब्लॉक में केवल `margin: 0 auto` काम करता है। लेकिन फ्लेक्सबॉक्स में ऑटो मार्जिन उस दिशा की सारी बची हुई खाली जगह को सोख लेता है:

नैवबार में बटन को दाएँ धकेलना:

.navbar {
  display: flex;
  align-items: center;
}

.login-button {
  margin-left: auto; /* बटन को बिल्कुल दाएँ धकेल देता है! */
}

`space-between` के लिए नकली रैपर डिव बनाने की कोई जरूरत नहीं। जिस भी बटन को दाएँ भेजना हो, उस पर सीधे `margin-left: auto` लगा दें।

कार्ड के बटन को नीचे चिपकाना:

.card {
  display: flex;
  flex-direction: column;
}

.card-cta-btn {
  margin-top: auto; /* बटन को कार्ड के निचले सिरे पर चिपका देता है! */
}

जब अलग-अलग कार्ड्स में विवरण का टेक्स्ट छोटा-बड़ा होता है, तो यह बटन को हमेशा एक समान नीचे की सीध में रखता है!

कोड का पंक्ति-दर-पंक्ति विश्लेषण

display: flex; justify-content: space-between; align-items: center;

नैवबार की त्रिमूर्ति! लोगो, लिंक सूची और सीटीए बटन को चौड़ाई में बराबर फैलाकर लंबवत रूप से बिल्कुल सेंटर में रखती है।

flex-wrap: wrap; gap: 16px;

स्क्रीन संकरी होने पर कार्ड्स को अगली लाइन में मुड़ने की अनुमति देता है, और बिना किसी मार्जिन झंझट के 16px का सुंदर गैप बनाए रखता है।

flex: 1 1 200px;

प्रत्येक कार्ड 200px का आधार लेता है। जगह बचने पर बराबर फैलता है (`grow: 1`) और जगह घटने पर सुगमता से सिकुड़ जाता है (`shrink: 1`)।

🧠 अपनी समझ की जाँच करें: CSS Flexbox

Q1यदि फ्लेक्स कंटेनर पर `flex-direction: column;` लगाया जाए, तो उसके अंदरूनी बच्चों के क्षैतिज (Horizontal) अलाइनमेंट को कौन-सी CSS प्रॉपर्टी नियंत्रित करेगी?

Q2लोकप्रिय शॉर्टहैंड `flex: 1;` का वास्तविक पूरा विस्तार (Full Expansion) क्या होता है?

Q3फ्लेक्सबॉक्स लेआउट के अंदर कोई लंबा URL या कोड स्निपेट अचानक अपने बॉक्स से बाहर निकलकर स्क्रीन क्यों तोड़ देता है?

Q44 लिंक वाले फ्लेक्स नैवबार में यदि आप चौथे लिंक पर `margin-left: auto;` लगा दें, तो क्या होगा?

🛠️

प्रैक्टिस चैलेंज: कार्ड्स को वर्टिकल लिस्ट में बदलें

दाएँ हाथ के लाइव कोड एडिटर में:

स्टेप 1: .card-row में flex-direction: row; को बदलकर flex-direction: column; करें। देखें कि कैसे सारे कार्ड्स एक के नीचे एक सज जाते हैं!
स्टेप 2: .card में text-align: center; हटाकर text-align: left; display: flex; justify-content: space-between; align-items: center; लगाएं।
स्टेप 3: देखें कि कैसे हर कार्ड एक सुंदर लिस्ट आइटम में बदल जाता है जिसमें हेडिंग बाईं तरफ और विवरण दाईं तरफ आ जाता है!
स्टेप 4: वापस ग्रिड देखने के लिए flex-direction: row; कर दें।

💡 सही समाधान कोड देखने के लिए यहाँ क्लिक करें

.card-row { display: flex; flex-direction: column; gap: 12px; } .card { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }

सामान्य गलतियाँ और सीनियर डेवलपर इंटरव्यू प्रश्न

❌ गलती: `min-width: auto` से टेक्स्ट का बाहर भागना

जब फ्लेक्स आइटम में कोई लंबा लिंक या कोड होता है, तो वह टूटने से मना कर देता है और कार्ड को फाड़कर बाहर निकल जाता है! क्यों? क्योंकि फ्लेक्स बच्चों पर डिफ़ॉल्ट min-width: auto लगा होता है। समाधान: हमेशा फ्लेक्स बच्चे पर min-width: 0; लगाएं!

✅ प्रो टिप: align-items बनाम align-content

align-items एक एकल पंक्ति के अंदर तत्वों को लंबवत संरेखित करता है। वहीं align-content केवल तब सक्रिय होता है जब flex-wrap: wrap के कारण अनेक पंक्तियाँ बन जाती हैं, और यह उन पूरी पंक्तियों के बीच की दूरी को नियंत्रित करता है!

💬 Interview Q: `flex: 1` और `flex: auto` में क्या सूक्ष्म गणितीय अंतर है?

`flex: 1` का अर्थ `1 1 0%` है: आधार (basis) 0% होने से ब्राउज़र अंदरूनी शब्दों की लंबाई को पूरी तरह भूल जाता है। पूरी चौड़ाई बराबर बांटी जाती है जिससे सभी कॉलम बिल्कुल सटीक पिक्सल में एक समान बनते हैं।

`flex: auto` का अर्थ `1 1 auto` है: आधार `auto` होने से ब्राउज़र पहले यह देखता है कि किस डिब्बे में कितना बड़ा टेक्स्ट है। उसके बाद बची हुई थोड़ी सी जगह बांटी जाती है, जिससे 10 शब्दों वाला डिब्बा 2 शब्दों वाले डिब्बे से काफी ज्यादा चौड़ा बनता है!

💬 Interview Q: Flexbox और CSS Grid में से किसे कब चुनना चाहिए?

1-आयामी लेआउट्स के लिए Flexbox (Content-Out): जब चीजें केवल एक पंक्ति या एक स्तंभ में बह रही हों (जैसे नैवबार, बटन समूह, टैग बैज, फॉर्म इनपुट)। यहाँ अंदरूनी कंटेंट तय करता है कि डिब्बा कितना बड़ा होगा।
2-आयामी लेआउट्स के लिए CSS Grid (Layout-In): जब आपको पंक्तियों और स्तंभों दोनों का संरेखण एक साथ चाहिए (जैसे पूरे पेज का लेआउट, फोटो गैलरी, डैशबोर्ड विजेट्स)। यहाँ पहले ग्रिड के खांचे बनते हैं, फिर उनमें चीजें रखी जाती हैं।

💬 Interview Q: मल्टी-लाइन फ्लेक्स ग्रिड में `justify-content: space-between` से लेआउट क्यों बिगड़ जाता है?

यदि आपके पास 3 कॉलम वाले फ्लेक्स ग्रिड में कुल 5 कार्ड्स हैं और आपने justify-content: space-between लगाया है:

पहली लाइन में 3 कार्ड्स बहुत सुंदर दिखेंगे। लेकिन दूसरी लाइन में सिर्फ 2 कार्ड्स बचेंगे। `space-between` चौथे कार्ड को सबसे बाएँ और पांचवें कार्ड को सबसे दाएँ फेंक देगा, जिससे बीच में एक बड़ा भद्दा खाली गड्ढा बन जाएगा!

समाधान: इसके लिए CSS Grid का grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) इस्तेमाल करें या फ्लेक्स में justify-content: flex-start; gap: 16px; रखें।

अगला लेसनCSS Grid 2D System