CSS Academy · पाठ

Justify-Content और Align-Items

justify-content और align-items से main axis तथा cross axis पर items वितरित कीजिए।

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

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

दो मुख्य संरेखण प्रॉपर्टी

सबसे अधिक उपयोग की जाने वाली दो flex संरेखण प्रॉपर्टी हैं:

justify-content — मुख्य अक्ष पर आइटम को संरेखित करता है
align-items — अनुप्रस्थ अक्ष पर आइटम को संरेखित करता है

justify-content: flex-start

flex-start (डिफ़ॉल्ट) आइटम को मुख्य अक्ष के आरंभ की ओर समेटता है। row दिशा में आइटम बाईं ओर संरेखित होते हैं।

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

आइटम को मुख्य अक्ष पर बीच में रखता है। Flexbox में क्षैतिज रूप से बीच में रखने की यह पारंपरिक तकनीक है।

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

आइटम को मुख्य अक्ष के अंत की ओर समेटता है (row दिशा में दाईं ओर)।

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

आइटम के बीच समान अंतर वितरित करता है। पहला आइटम आरंभ पर और अंतिम आइटम अंत पर होता है — किनारों पर कोई अतिरिक्त अंतर नहीं होता।

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

प्रत्येक आइटम के चारों ओर समान अंतर रखता है। किनारे वाले आइटम को अंदर के अंतर की तुलना में आधा अंतर मिलता है। देखने में, किनारों पर पैडिंग आइटम के बीच की पैडिंग से आधी होती है।

justify-content: space-evenly

सभी अंतर (किनारों सहित) समान होते हैं। space-around के विपरीत, किनारों की पैडिंग आइटम के बीच के अंतर के बराबर होती है।

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (डिफ़ॉल्ट)

stretch (डिफ़ॉल्ट) अनुप्रस्थ अक्ष पर सभी flex आइटम को कंटेनर के अनुप्रस्थ आकार को भरने योग्य बनाता है। किसी row कंटेनर में सभी आइटम की ऊँचाई समान हो जाती है।

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

आइटम को अनुप्रस्थ अक्ष पर बीच में रखता है। row कंटेनर में यह आइटम को लंबवत रूप से बीच में रखता है। यह लंबवत संरेखण का पारंपरिक समाधान है।

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start और flex-end

flex-start आइटम को अनुप्रस्थ-अक्ष के आरंभिक किनारे पर संरेखित करता है (row में ऊपर)। flex-end उन्हें अनुप्रस्थ-अक्ष के अंतिम किनारे पर संरेखित करता है (row में नीचे)।

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

आइटम को इस तरह संरेखित करता है कि उनके टेक्स्ट बेसलाइन एक सीध में हों। यह तब उपयोगी है जब आइटम के फ़ॉन्ट आकार अलग-अलग हों, लेकिन वे देखने में एक सीध में दिखाई देने चाहिए।

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

त्वरित जाँच

किस संयोजन से किसी flex आइटम को उसके कंटेनर के भीतर क्षैतिज और लंबवत, दोनों दिशाओं में पूरी तरह बीच में रखा जा सकता है?

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

पुनरावलोकन

justify-content, flex-start, center और space-between जैसे मानों के साथ मुख्य अक्ष पर आइटम वितरित करता है। align-items, stretch, center और flex-start के साथ अनुप्रस्थ अक्ष पर आइटम की स्थिति निर्धारित करता है। दोनों मिलकर संरेखण के दोनों अक्षों को नियंत्रित करते हैं।

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

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

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

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

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

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

क्या “Justify-Content और Align-Items” पाठ निःशुल्क है?

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

“Justify-Content और Align-Items” में मैं क्या सीखूँगा?

justify-content और align-items से main axis तथा cross axis पर items वितरित कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“Justify-Content और Align-Items” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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