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. इस पात्र को अपनी सामग्री क्षैतिज और लंबवत, दोनों तरह से बीच में लानी है। कौन सा गुण नियम को पूरा करता है?

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

   • align-items
   • text-align
   • vertical-align
   • justify-items
3. एक flex कंटेनर में, .a का flex-grow: 2 है और .b का flex-grow: 1 है। क्या होता है?
   • .a हमेशा .b से ठीक दोगुना चौड़ा होता है
   • .a को बची हुई खाली जगह में से .b की तुलना में दोगुना मिलता है
   • .b को छिपा दिया जाता है और .a को प्राथमिकता मिलती है