जगह-आइटम - सीएसएस-ट्रिक्स

place-itemsसीएसएस में संपत्ति के लिए आशुलिपि है align-itemsऔर justify-itemsगुण, उन्हें एक ही घोषणा में संयोजन।

एक सामान्य उपयोग ग्रिड के साथ क्षैतिज और ऊर्ध्वाधर केंद्र कर रहा है:

.center-inside-of-me ( display: grid; place-items: center; )

फ्लेक्सबॉक्स और ग्रिड लेआउट की शुरुआत के साथ इन गुणों का उपयोग हुआ है, लेकिन इसके लिए भी लागू होते हैं:

• ब्लॉक स्तर के बक्से
• पूरी तरह से तैनात बक्से
• बिल्कुल तैनात बक्से की स्थैतिक-स्थिति
• टेबल सेल

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

संपत्ति दोहरे मूल्यों को स्वीकार करती है, पहली align-itemsऔर दूसरी को justify-items। रिफ्रेशर के रूप में, align-itemsऊर्ध्वाधर (कॉलम) अक्ष के साथ सामग्री संरेखित करता है जबकि justify-itemsक्षैतिज (पंक्ति) अक्ष के साथ संरेखित करता है।

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

यह लेखन के समान है:

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

यदि केवल एक मूल्य प्रदान किया जाता है, तो यह दोनों गुणों को निर्धारित करता है। उदाहरण के लिए, यह:

.item ( display: grid; place-items: start; )

... यह लिखने के रूप में ही है:

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

स्वीकृत मूल्य

इस संपत्ति को जो दिलचस्प बनाता है वह यह है कि इसका उपयोग किए गए संदर्भ के आधार पर अलग-अलग व्यवहार करता है। उदाहरण के लिए, कुछ मान केवल Flexbox पर लागू होते हैं और ग्रिड सेटिंग में काम नहीं करेंगे। इसके अतिरिक्त, कुछ मूल्य उस align-itemsसंपत्ति पर लागू होते हैं जहां अन्य justify-itemsपक्ष पर लागू होते हैं ।

इसके अलावा, मूल्यों को स्वयं कई प्रकार के संरेखण में गिरने के बारे में सोचा जा सकता है: प्रासंगिक, वितरण, स्थितीय (जो सीधे लेआउट में बाल-तत्व पर लागू होता है), और आधार रेखा।

राहेल एंड्रयू के पास एक उत्कृष्ट बॉक्स संरेखण धोखा शीट है जो मूल्यों के प्रभाव को स्पष्ट करने में मदद करता है।

मूल्य	प्रकार	विवरण
auto	प्रासंगिक	तत्व के संदर्भ के आधार पर मूल्य समायोजित होता है। यह justify-itemsतत्व के मूल तत्व के मूल्य का उपयोग करता है । यदि माता-पिता मौजूद नहीं हैं या इसे उस तत्व पर लागू किया absoluteजाता है, जिसके साथ स्थित है , तो मान बन जाता है normal।
normal	प्रासंगिक	लेआउट संदर्भ के डिफ़ॉल्ट व्यवहार को ले जाता है जहां इसे लागू किया जाता है। • ब्लॉक-स्तरीय लेआउट: start • पूर्ण-स्थिति: startप्रतिस्थापित तत्वों के लिए और stretchअन्य सभी के लिए • टेबल लेआउट: मान को अनदेखा किया जाता है • Flexbox लेआउट: मान को अनदेखा किया जाता है • ग्रिड लेआउट:, stretchजब तक कि पहलू अनुपात या आंतरिक आकार का उपयोग नहीं किया जाता है जहां यह व्यवहार करता है पसंदstart
stretch	वितरण	के लिए align-itemsऔर क्षैतिज रूप से कंटेनर के दोनों किनारों के लिए तत्व का विस्तार करता है justify-items।
start	अवस्था का	सभी तत्व कंटेनर के शुरुआती (बाएं) किनारे पर एक दूसरे के खिलाफ गठबंधन किए जाते हैं
end	अवस्था का	सभी तत्व कंटेनर के अंत (दाएं) किनारे पर एक दूसरे के खिलाफ गठबंधन किए जाते हैं
center	अवस्था का	कंटेनर के केंद्र की ओर एक दूसरे के बगल में आइटम संरेखित किए जाते हैं
left	अवस्था का	कंटेनर के बाईं ओर एक दूसरे के बगल में आइटम संरेखित किए जाते हैं। यदि संपत्ति एक मानक शीर्ष, दाएं, नीचे, बाएं अक्ष के समानांतर नहीं है, तो यह व्यवहार करता है end।
right	अवस्था का	कंटेनर के दाईं ओर एक दूसरे के बगल में आइटम संरेखित किए जाते हैं। यदि संपत्ति एक मानक शीर्ष, दाएं, नीचे, बाएं अक्ष के समानांतर नहीं है, तो यह व्यवहार करता है start।
flex-start	अवस्था का	एक फ्लेक्सबॉक्स-केवल मूल्य (जो वापस गिरता है start) जहां आइटम कंटेनर के शुरुआती किनारे की ओर पैक किए जाते हैं।
flex-end	अवस्था का	एक फ्लेक्सबॉक्स-केवल मूल्य (जो वापस गिरता है end) जहां आइटम कंटेनर के अंतिम छोर की ओर पैक किए जाते हैं।
self-start	स्व-स्थिति	एक लेआउट में एक आइटम को अपने स्वयं के शुरुआती पक्ष के आधार पर कंटेनर किनारे पर संरेखित करने की अनुमति देता है। मूल रूप से यह निर्धारित करता है कि अभिभावक पर निर्धारित मूल्य क्या है।
self-end	स्व-स्थिति	कंटेनर के स्थितीय मूल्य को प्राप्त करने के बजाय अपने स्वयं के समाप्त होने के आधार पर कंटेनर के किनारे पर खुद को संरेखित करने के लिए एक लेआउट में एक आइटम की अनुमति देता है। मूल रूप से यह निर्धारित करता है कि अभिभावक पर निर्धारित मूल्य क्या है।
first baseline last baseline	आधारभूत	एक समूह के भीतर सभी तत्वों को संरेखित करता है (यानी एक पंक्ति के भीतर कोशिकाएं) उनके संरेखण आधार रेखाओं के मेल से। चूक firstअगर baselineअपने दम पर इस्तेमाल किया जाता है।

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

यह संपत्ति CSS बॉक्स संरेखण मॉडल स्तर 3 विनिर्देश में शामिल है।

ब्राउज़र का समर्थन बहुत व्यापक हो गया है और काफी हद तक सिर्फ प्रयोग करने योग्य है:

• एज 79+ (पोस्ट क्रोमियम संक्रमण)
• फ़ायरफ़ॉक्स 45+
• क्रोम 59+
• सफारी 11+

संदर्भ

• सीएसएस बॉक्स संरेखण मॉडल स्तर 3 - आधिकारिक विनिर्देश जहां place-itemsसंपत्ति शुरू में परिभाषित की गई है।
• मोज़िला डेवलपर नेटवर्क - मोज़िला टीम का प्रलेखन।
• बॉक्स संरेखण धोखा शीट - राहेल एंड्रयू की रूपरेखा संरेखण शर्तों और उनकी परिभाषाओं को समझने के लिए एक सुपर सहायक संसाधन है।