Flexbox: axes, justify/align, gap, flex-grow

रोज़मर्रा के लेआउट में अपने एलिमेंट्स को अलाइन करने, केंद्रित करने और वितरित करने के लिए Flexbox के दो axes पर महारत हासिल करें।

9 मिनट · 3 प्रश्न

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

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

कुछ घोषणाएँ इस सूची को एक पेशेवर बार में बदल देती हैं: space-between लोगो को बाईं ओर और बटन को दाईं ओर धकेलता है, align-items: center अलग-अलग ऊँचाई वाले एलिमेंट्स को लंबवत रूप से अलाइन करता है, और gap लिंक्स के बीच बिना किसी मार्जिन को संभाले हुए दूरी बना देता है।

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

मानसिक अभ्यास: अगर आप .navbar को flex-direction: column में बदल दें, तो justify-content: space-between क्या करता है? अब यह एलिमेंट्स को लंबवत रूप से वितरित करता है, क्योंकि main axis घूम गया है। यही Flexbox का क्लासिक जाल है: justify-content और align-items का मतलब "क्षैतिज" और "लंबवत" नहीं होता, बल्कि "main axis" और "cross axis" होता है। एक और अवश्य जानने योग्य उपयोग: कंटेंट को पूरी तरह केंद्रित करना।

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

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

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. flex-direction: column के साथ, justify-content किसे नियंत्रित करता है?
   • एलिमेंट्स का क्षैतिज अलाइनमेंट
   • लंबवत अलाइनमेंट, क्योंकि main axis लंबवत हो गया है
   • टेक्स्ट की पंक्तियों के बीच की दूरी
2. कौन सा संयोजन किसी flex कंटेनर में एक एलिमेंट को क्षैतिज और लंबवत दोनों रूप से केंद्रित करता है?
   • text-align: center और vertical-align: middle
   • justify-content: center और align-items: center
   • कंटेनर पर margin: 0 auto
3. एक flex कंटेनर में, .a का flex-grow: 2 है और .b का flex-grow: 1 है। क्या होता है?
   • .a हमेशा .b से ठीक दोगुना चौड़ा होता है
   • .a को बची हुई खाली जगह में से .b की तुलना में दोगुना मिलता है
   • .b को छिपा दिया जाता है और .a को प्राथमिकता मिलती है