औचित्य-आइटम - सीएसएस-ट्रिक्स

justify-itemsसंपत्ति सीएसएस बॉक्स संरेखण मॉड्यूल जो मूल रूप से उनके दायरे के भीतर ग्रिड आइटम के संरेखण को नियंत्रित करता है की एक उप-संपत्ति है।

.element ( justify-items: center; )

justify-itemsपंक्ति (इनलाइन) अक्ष के साथ ग्रिड आइटम संरेखित करता है। विशेष रूप से, यह संपत्ति आपको एक विशिष्ट स्थिति (जैसे start, centerऔर end) या एक व्यवहार (जैसे autoया stretch) के साथ एक ग्रिड कंटेनर (ग्रिड खुद नहीं) के अंदर वस्तुओं के लिए संरेखण सेट करने की अनुमति देती है ।

जब justify-itemsउपयोग किया जाता है, तो यह justify-selfसभी ग्रिड आइटमों के लिए डिफ़ॉल्ट मान भी निर्धारित करता है , हालांकि यह बच्चे justify-selfपर संपत्ति का उपयोग करके बच्चे के स्तर पर ही ओवरराइड किया जा सकता है ।

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

वाक्य - विन्यास

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )

• प्रारंभिक मूल्य: legacy
• पर लागू होता है: सभी तत्व
• इन्हेरिट किया: नहीं
• कंप्यूटेड वैल्यू: जैसा कि निर्दिष्ट है
• एनिमेशन प्रकार: असतत

मूल्यों

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

मूल खोजशब्द मूल्य

• stretch: डिफ़ॉल्ट मान। ग्रिड आइटम सेल की पूरी चौड़ाई भरने के लिए आइटम संरेखित करता है
• auto:justify-items माता-पिता के समान मूल्य ।
• normal: जबकि हम justify-itemsएक ग्रिड लेआउट में सबसे अधिक बार उपयोग करते हैं , यह तकनीकी रूप से किसी भी बॉक्स संरेखण के लिए है और normalइसका मतलब है कि अलग-अलग लेआउट संदर्भों में अलग-अलग चीजें शामिल हैं:
  • ब्लॉक-स्तर के लेआउट ( start)
  • ग्रिड लेआउट stretch
  • Flexbox (अनदेखा)
  • टेबल सेल्स (अनदेखा)
  • पूरी तरह से तैनात लेआउट ( start)
  • बिल्कुल तैनात बक्से ( stretch)
  • पूरी तरह से तैनात बक्से ( start) की जगह

.container ( justify-items: stretch; )

बेसलाइन संरेखण मूल्य

यह बॉक्स के पहले या अंतिम आधार रेखा के संरेखण आधार रेखा को उसके संरेखण संदर्भ के संगत आधार रेखा के साथ संरेखित करता है।

.container ( justify-items: baseline; )

• के लिए गिरावट संरेखण first baselineहै safe start।
• के लिए गिरावट संरेखण last baselineहै safe end।
• baselineसे मेल खाती है first baselineजब अकेले इस्तेमाल किया

नीचे डेमो में (फ़ायरफ़ॉक्स में सबसे अच्छा देखा गया), हम देखते हैं कि मुख्य अक्ष के आधार पर ग्रिड के आधार रेखा के साथ तत्व कैसे संरेखित होते हैं।

स्थिति संरेखण मूल्य

• start: संरेखण कंटेनर के प्रारंभ किनारे पर आइटम संरेखित करता है
• end: अंत किनारे संरेखण कंटेनर के साथ आइटम संरेखित करता है
• center: संरेखण कंटेनर के केंद्र में आइटम संरेखित करता है
• left: संरेखण कंटेनर के बाईं ओर आइटम संरेखित करता है
• right: संरेखण कंटेनर के अधिकार में आइटम संरेखित करता है
• self-start: प्रत्येक ग्रिड आइटम सेल की शुरुआत में आइटम संरेखित करता है
• self-end: प्रत्येक ग्रिड आइटम सेल के अंत में आइटम संरेखित करता है

.container ( justify-items: )

.container ( justify-items: )

.container ( justify-items: center; )

ओवरफ्लो संरेखण मूल्यों

अतिप्रवाह संपत्ति यह कैसे ग्रिड की सामग्री प्रदर्शित जाएंगे, जब सामग्री ग्रिड की सीमा सीमा से अधिक है निर्धारित करता है। इसलिए जब सामग्री संरेखण कंटेनर से बड़ी होती है, तो इसके परिणामस्वरूप अतिप्रवाह होता है जिससे डेटा हानि हो सकती है। इसे रोकने के लिए, हम उस safeमान का उपयोग कर सकते हैं जो ब्राउज़र को संरेखण बदलने के लिए कहता है ताकि कोई डेटा हानि न हो।

• safe : यदि कोई आइटम संरेखण कंटेनर को ओवरफ्लो करता है, तो startमोड का उपयोग किया जाता है।
• unsafe : संरेखण मूल्य रखा जाता है जैसा कि यह है, आइटम आकार या संरेखण कंटेनर पर ध्यान दिए बिना।

विरासत के मूल्य

• legacy : जब एक दिशात्मक कीवर्ड (जैसे right, leftया center) के साथ उपयोग किया जाता है , तो उस कीवर्ड को वंशजों को विरासत में दिया जाता है। लेकिन यदि वंशज घोषित किया जाता है justify-self: auto;तो legacyउसे नजरअंदाज कर दिया जाता है लेकिन फिर भी दिशात्मक कीवर्ड का सम्मान करता है। यदि कोई निर्देशात्मक कीवर्ड प्रदान नहीं किया जाता है तो मूल्य विरासत में दिए गए मूल्य की गणना करता है। अन्यथा, यह करने के लिए गणना करता है normal।

डेमो

अधिक जानकारी

• सीएसएस बॉक्स संरेखण मॉड्यूल स्तर 3 (कार्य मसौदा)
• ग्रिड के लिए एक पूर्ण गाइड
• फ्लेक्सबॉक्स के लिए एक पूर्ण गाइड

ब्राउज़र का समर्थन

ब्राउज़र समर्थन justify-itemsसॉर्ट सरगम ​​चलाता है क्योंकि यह ग्रिड, फ्लेक्सबॉक्स, टेबल सेल जैसे कई लेआउट संदर्भों में उपयोग किया जाता है। लेकिन सामान्य तौर पर, अगर ग्रिड और फ्लेक्सबॉक्स का समर्थन किया जाता है, तो आप मान सकते हैं कि justify-itemsयह भी है।

जाली का नक्शा

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	16+	45+	57+ है	10.1+	44+

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ओपेरा मोबाइल
81+	45+	81+	10.1+	59+ है

फ्लेक्स लेआउट

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	12+	20+	५२+	9+	12.1+

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ओपेरा मोबाइल
87+ है	83+	81+	9+	12.1+

संबंधित गुण

पंचांग 27 अक्टूबर 2019 को

संरेखित आइटम

ज्योफ ग्राहम